更新 angular 中 table 的多行 2

Question

我正在尝试使用一个提交按钮针对每一行插入一些数据。所以我在表单标签中包含了一个 table 并像这样实现：

<form>
<table>
    <tr *ngFor="let item of list;let index = index>
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td><input [(ngModel)]="model[index]" id="{{item.id}}"></td>
    </tr>
</table>
 <button type="submit">Proceed</button>
</form>

我想要的是在提交按钮上针对 'item.id' 在输入标签中插入数据，但我无法使用提交按钮检索 'id'。考虑到我必须更新两行，我得到的是没有 [75, 76] 的输入值数组。那么我如何检索每行的 ID 或更新每个条目的数据。

Answer 1

向您的表单添加提交功能，并在提交功能中访问您的 "model" 变量以获取字段的所有索引。

class MyComponent{
    model:any;

    OnSubmit(){

        window.alert(JSON.stringify(model);

    }

}

检查我的 plunker https://plnkr.co/edit/JZ94mTquGmRkq1Xmhgec?p=preview

更新 angular 中 table 的多行 2

update multiple rows of table in angular 2

angular2-forms

angular