在 ngFor 中调用一个函数，结果将在 <td> 个元素中使用

Question

我的服务基本上是 returns 和 object:

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

还有一些基于公式。这些结果显示在 table 行中。在我的 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>

但它不起作用。我试图避免在每个单元格上返回每个信息，因为健康状况决定状态，而状态决定 parent 用一种方法更容易完成它们。

我得到的错误是：

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

Answer 1

您可以做的是首先对每个条目应用 itemStatus 函数，然后在您的模板中迭代它们。

这是一个例子

component.ts

这将在每个条目上调用函数并将结果数组放在 records_info

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

component.html

在模板中，您像使用 *ngFor

的任何数组一样遍历 records_info

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

希望这能解决您的问题，否则请告诉我们

在 ngFor 中调用一个函数，结果将在 <td> 个元素中使用

call a function in ngFor with results to be used in <td> elements

angular

angular5