1. 程式人生 > >angularjs2版本建立一個數組,將數組裡面的內容通過資料繫結的形式迴圈到table表單中

angularjs2版本建立一個數組,將數組裡面的內容通過資料繫結的形式迴圈到table表單中

 原始碼 元件裡面的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;
}
 }  

執行之後的效果圖


點選編輯之後的效果圖