<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;
}
 }  

執行之後的效果圖

點選編輯之後的效果圖