Для создания динамической c ngModel в angular 6+

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>

Мне нужно создать динамическую c ngModel, имя которой будет таким же, как и в примере, указанном в примере строки: {{item.value}} 1. Здесь я не уверен, как создать 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>

Дайте мне знать это то, что вам помогло