Question

我使用Angular 6.0。我有一个属性列表（propertiesList）和一个具有这些属性的对象列表（objectList）。我需要在表中显示所有对象，其中每一列都是属性之一。

我已经读了很多关于在ngFor中使用ngFor在列表中的列表上进行迭代的SO帖子，但这不是我想要的。因此，在将我链接到其中之一之前，请阅读我的示例代码。我想使用列表遍历对象。问题是该对象在列表中

HTML

<table>
    <tr>
        <th>Name</th>
        <th *ngFor="let property of addedColumns">{{property}}</th>
    </tr>
    <tr *ngFor="let obj of objectList">
        <td>{{obj.name}}</td>
        <td *ngFor="let property of addedColumns">{{obj.properties.property}}</td>
    </tr>
</table>

TS对象示例

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class Example implements OnInit {

    constructor() {}
    ngOnInit() {}

    //dynamic in real version
    addedColumns = ['prop1','prop2', 'prop3']

    //also dynamic
    objectList = [
        {name:'1',properties:{prop1:'ex',prop2:'ex',prop3:'ex'}},
        {name:'2',properties:{prop1:'ex2',prop2:'ex2',prop3:'ex2'}},
        {name:'3',properties:{prop1:'ex3',prop2:'ex3',prop3:'ex3'}}
    ]

}

很明显，问题出在HTML中的'{{obj.properties.property}}'，但是我不知道适当的引用是什么。预先感谢您提供任何答案。

Answer 1

如果您尝试使用变量引用属性名称，则应使用[]加上括号。

这将起作用：

<table>
    <tr>
        <th>Name</th>
        <th *ngFor="let property of addedColumns">{{property}}</th>
    </tr>
    <tr *ngFor="let obj of objectList">
        <td>{{obj.name}}</td>
        <td *ngFor="let property of addedColumns">{{obj.properties[property]}}</td>
    </tr>
</table>

如何同时引用两个活动的ngFor？

1 个答案: