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 =“让项的内容； 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中的函数，其结果将在元素中使用

1 个答案: