вызвать функцию в ngFor с результатами, которые будут использоваться в <td>элементах

Question

У меня есть служба, которая в основном возвращает объект:

  {'health' : 50, 'status':'1A1', 'owner': 'Parent'}

и еще несколько на основе формулы.Эти результаты отображаются в строке таблицы.В моем component.ts у меня есть:

      record_info = {}
     itemStatus(item_id) {
          this.record_info = this.itemInformationService.itemStatus(item_id);
        }

затем component.html:

      <tr *ngFor="let item of items; itemStatus(item.id);">
      <td>{{ record_info['health']</td>
      <td>{{ record_info['status']</td>
      <td>{{ record_info['parent']</td>
      </tr>

Но это не работает.Я стараюсь не возвращать каждую информацию о каждой ячейке, поскольку состояние здоровья определяет состояние, а состояние определяет родителя, что их проще выполнять одним методом.

Я получаю следующую ошибку:

]* ngFor = "let item of items; itemStatus (item.id);"

Answer 1

Что вы можете сделать, это сначала применить функцию itemStatus к каждой из записей, а затем выполнить итерации по ним в своем шаблоне.

Вот пример

компонента.ts

Это вызовет функцию для каждой записи и поместит полученный массив в records_info

  records_info = this.items.map(item => this.itemStatus(item.id));

component.html

В шаблоне вы перебираете records_info как любой массив с * ngFor

      <tr *ngFor="let record_info of records_info">
      <td>{{ record_info.health</td>
      <td>{{ record_info.status</td>
      <td>{{ record_info.parent</td>
      </tr>

Надеюсь, это решит вашу проблему, в противном случае сообщите нам