在角度6+中创建动态ngModel

Question

嗨，我正在创建一个表，其中的行根据特定条件进行更改。

<table id="totBudget">
<thead>
<tr>
<th></th>
<th>CC_1</th>
<th>CC_2</th>
<th>CC_3</th>
<th>CC_4</th>
<th>Total</th>
<th>CC_NAME</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of source; let i= index">
<td>{{item.name}}</td>
<td><input type="text" class="{{item.value}}1" id="{{item.value}}1"></td>
<td><input type="text" class="{{item.value}}2" id="{{item.value}}2"></td>
<td><input type="text" class="{{item.value}}3" id="{{item.value}}3"></td>
<td><input type="text" class="{{item.value}}4" id="{{item.value}}4"></td>
<td><input type="text" class="{{item.value}}tot" id="{{item.value}}tot"></td>
<td><input type="text" class="{{item.value}}cc" id="{{item.value}}cc"></td>
</tr>
</tbody>
</table>

我需要创建一个动态ngModel，其名称将与行示例中提到的id相同：｛｛item.value｝｝1。在这里，我不知道如何为所有名称依赖于item.value和表行的输入创建ngModel。如果你有什么建议，请告诉我。

Answer 1

您可以创建一个对象来保存表的状态，如

TS:

tableObject ={}

HTML:

<tr *ngFor="let item of source; let i= index">
<td>{{item.name}}</td>
<td><input type="text" [(model)]="tableObject[item.value +'1']" class="{{item.value}}1" id="{{item.value}}1"></td>
<td><input type="text" [(model)]="tableObject[item.value +'2']" class="{{item.value}}2" id="{{item.value}}2"></td>
...
</tr>

让我知道它帮助了你