Получить индекс элемента ngFor и обновить значение

Question

Я пытаюсь обновить текстовые значения полей ввода в моем шаблоне Angular.Значения данных шаблона генерируются в цикле NgFor, который получает значения от веб-службы.Вот мой шаблон.

<ul *ngFor="let item of vals?.bu">
  <li>
    <table>
          <tr>
            <td><button type="button" class="btn btn-info">{{item?.id}}</button></td>
            <td><input type="text" [(ngModel)]="item.bcluster"></td>
            <td><input type="text" [(ngModel)]="item.bsector"></td>
            <td><button type="button" id={{item?.id}} (click)="update($event)">Update</button></td>
          </tr>
          <tr>
            <td></td>
            <td><input type="text" [(ngModel)]="item.bgroup"></td>
            <td><input type="text" [(ngModel)]="item.bunit"></td>
            <td><button type="button" id={{item?.id}} (click)="delete($event)">Delete</button></td>
          </tr>
      </table>

  </li>
</ul>

Теперь мне нужно получить значения полей, например, 'bcluster, bsector, bgroup, bunit' из шаблона, в мой файл TS, чтобы вызвать вызов API обновления (через событие щелчка на кнопке обновления), однако, когда я пытаюсь получить значения, я получаю неопределенное значение, потому что я не получаю точный индекс строки.Я не уверен, как это сделать.

Вот мой файл TS (просто пытаюсь вывести значения)

  update(event) {
    console.log(this.bcluster);
  }

Answer 1

Обновите ul, чтобы определить индекс

<ul *ngFor="let item of vals?.bu; let i = index">

и использовать i в качестве параметра функции

Answer 2

Вы должны передать элемент и индекс из шаблона что-то вроде

<ul *ngFor="let item of vals?.bu; let i = index;">
  <li>
    <table>
          <tr>
            <td><button type="button" class="btn btn-info">{{item?.id}}</button></td>
            <td><input type="text" [(ngModel)]="item.bcluster"></td>
            <td><input type="text" [(ngModel)]="item.bsector"></td>
            <td><button type="button" id={{item?.id}} (click)="update(item,i)">Update</button></td>
          </tr>
      </table>

  </li>
</ul>

Чем в ts

update(item,idx) {
    //here idx will give you the index
    console.log(item.bcluster);
  }

Answer 3

Синтаксис

*ngFor="let item of vals?.bu; let i = index;"

Теперь вы можете передать i вашей функции.