angularjs2版本创建一个数组，将数组里面的内容通过数据绑定的形式循环到table表单中

最新推荐文章于 2024-06-04 09:57:30 发布

粪球的生活

最新推荐文章于 2024-06-04 09:57:30 发布

阅读量8.4k

点赞数

文章标签： web前端angularjs2的指令之数

本文链接：https://blog.csdn.net/clt1992/article/details/52629224

版权

源代码

组件里面的 template代码部分

<table id="table" class="table table-bordered table-responsive table-striped">
    <tr><th class="col-lg-2">货道号</th><th class="col-lg-4">容量</th><th class="col-lg-4">货道位置</th><th class="col-lg-2">操作</th></tr>
    <tr  *ngFor="let item of shop;let i = index" >
        <td><input type="text" name="id"  value="{{item.id}}"  disabled ><input class="cou-input" type="text" name="id"  placeholder="{{item.id}}" ></td>
        <td><input type="text" name="num"  value="{{item.num}}" disabled><input class="cou-input" type="text" name="num"  placeholder="{{item.num}}"  ></td>
        <td><input type="text" name="dress"  value="{{item.dress}}" disabled><input class="cou-input" type="text" name="dress"  placeholder="{{item.dress}}"  ></td>
        <td>
            <i class="iconfont">&#xe616;</i> <button (click)="getData($event)">编辑</button>
        </td>
    </tr>
</table>

export class ModeldetailComponent implements OnInit {
    flag = true;

    shop= [
        {id: "000", num: 10, dress: "1排"},
        {id: "001", num: 10, dress: "1排"},
        {id: "002", num: 10, dress: "1排"},
        {id: "003", num: 10, dress: "1排"},
        {id: "004", num: 10, dress: "1排"},
        {id: "005", num: 10, dress: "1排"},
        {id: "006", num: 10, dress: "1排"},
        {id: "007", num: 10, dress: "1排"},
        {id: "008", num: 10, dress: "1排"},
        {id: "009", num: 10, dress: "1排"},
        {id: "010", num: 10, dress: "1排"}
    ];
    getData(event){
        var otr=event.path[2];
        var len=event.path[2].children.length;

        if(this.flag){
            var i=0;
            while (i<(len-1)){
                otr.children[i].children[0].style.display="none";
                otr.children[i].children[1].style.display="inline";
                i++;
            }
            if (i==(len-1)){
                otr.children[i].children[0].innerHTML="&#xe615;"
                otr.children[i].children[1].innerHTML="保存";
            }
            this.flag=false;
        }else {
            var i=0;
            while (i<(len-1)){
                otr.children[i].children[0].style.display="inline";
                otr.children[i].children[1].style.display="none";
                i++;
            }
            if (i==(len-1)){
                otr.children[i].children[0].innerHTML="&#xe616;"
                otr.children[i].children[1].innerHTML="编辑";
            }
            this.flag=true;
        }
 }