*ngFor 不适用于动态值

Question

处理一些数组项目，但卡在 *ngFor 不接受另一个 *ngFor 提供的动态值。

<table border="2">
  <tr>
    <th rowspan="2">Subject</th>
    <th colspan="4" *ngFor='#category of json.category_name'>{{category}}</th>
    <th colspan="4">Overall</th>
  </tr>
  <tr>
    <div *ngFor="#category of json.category_name">
      <th *ngFor="#fa of json.total_fa.category">{{fa}}</th>  //Not Working
    </div>
  </tr>
</table> 

在注释行中，我想提供json.total_fa.category，其中这个category 来自上面声明的另一个*ngFor。但没有得到任何结果，似乎有角度试图找出不存在的json.total_fa.category 本身。

但我想加载json.total_fa_term1（这是该类别的第一个索引）。我怎样才能做到这一点。

1. 我可以在同一个 HTML 组件上使用多个 *ngFor 吗？

2. 有时 *ngFor 和 *ngIf 在嵌入同一个元素时无法正常工作，为什么？

这是我的workground demo

Answer 1

您需要使用.total_fa[category] 而不是.total_fa.category 否则您将尝试访问名称为category 的属性：

<div *ngFor="#category of json.category_name">
  <th *ngFor="#fa of json.total_fa[category]">{{fa}}</th>
</div>

查看更新的 plunkr：http://plnkr.co/edit/v08AdzNsR4GHMlZWQNsR?p=preview。