在angular 6+中创建动态ngModel。

Question

嗨，我正在创建一个表，其中的行根据特定的条件而改变，我需要创建一个动态的ngModel，它的名称将与行示例中提到的id相同。

<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相同。这里我不知道如何为所有输入创建ngModel，它的名字取决于item.value和表行，如果你有任何建议，请告诉我。

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>

让我知道它帮助你