*ngFor is not working with dynamic values

问题:

Working on some array projects but Stuck on point where *ngFor did't accept dynamic value provided by another *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> 

here in the commented line i want to provide json.total_fa.category where this category is coming from another *ngFor which is declared just above. but getting no result it seems angular try to find out json.total_fa.category itself which is not present.

but i want to load json.total_fa_term1 (which is first index from the category). how can i achive this.

2. Can i use more than one *ngFor on same HTML component ?

3. sometimes *ngFor and *ngIf is not working properly while embed on the same element why ?

here is my workground demo

回答1:

You need to use .total_fa[category] instead of .total_fa.category otherwise you will try to access a property with name category:

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

See the updated plunkr: http://plnkr.co/edit/v08AdzNsR4GHMlZWQNsR?p=preview.