angular.js - angular2中如何對ngfor的遍歷的項目元素再進行循環渲染?

Question

我拿到的數據:

    var items=[
        { "version": "1", "theme": "Windstorm" ,"age":20},
        { "version": "2", "theme": "Bombasto","age":21},
        { "version": "3", "theme": "Magneta" ,"age":22},
        { "version": "4", "theme": "Tornado" ,"age":23}
    ];
    
    

我的template:

<p>
      <tr *ngFor="let item of items">
        <td *ngFor="怎么写">怎么写</td>
      </tr>
</p>
</p>

我想對item裡的key再進行遍歷,拿到對應的value循環渲染到元素中.我的template該怎麼寫?

...

Answer 1

ng2这点让我非常不爽，居然不能天然遍历Object，我們只能自己寫了，為了不讓你困惑，我用最簡單的方式來玩，

首先是template部分：

<tr *ngFor="let item of items">
    <td *ngFor="let key of getKeys(item)">
        {{ key }} = {{ item[key]  }}
    </td>
</tr>

下面是Component邏輯部分:

@Component({
  selector: 'test',
  templateUrl: 'template.html',
  styleUrls:  ['style.css']
})
export class ItemsComponent {

    //关键就是这个getKeys方法，得自己写，真他妈的
    getKeys(item){
        return Object.keys(item);
    }
}

方法一定可以用，自己玩吧

Answer 2

keys.pipe.ts

雷雷

app.component.ts

雷雷