Question

我想动态打印对象项目

const data = {
    title1: {
      name: "real title",
      value: ""
    },
    title2: {
      name: "real title2",
      value: ""
    },
    title3: {
      name: "real title3",
      value: ""
    },
    title4: {
      name: "real title4",
      value: ""
    },
    title5: {
      name: "real title5",
      value: ""
    },
    title6: {
      name: "real title6",
      value: ""
    }
};

我将打印data.title[i].name的列表。

首先，我获得数组中的标题列表，以便可以循环播放它们。

const titlesList = Object.keys(this.data);

然后用HTML

<div *ngFor="let title of titlesList">
   {{ data.title.name }}
</div>

我要打印的内容：

 - real title 
 - real title1
 - real title2
 - ...

我得到的错误：

错误TypeError：无法读取未定义的属性“名称”

Answer 1

您需要通过[]表示法进行访问，因为您的属性密钥存储在title范围变量中。 []将计算其中的表达式，获取值并尝试查找具有该值的属性。

<div *ngFor="let title of titlesList">
   {{ data[title].name }}
</div>

或者代替Object.keys，可以使用Object.values (ES8)

titlesList = Object.values(this.data);

并在标记中

 <div *ngFor="let title of titlesList">
    {{ title.name }}
 </div>

Angular 6.1 提供了一个新的 KeyValue 管道。使用此功能，您可以只使用

<div *ngFor="let item of data| keyvalue">
   {{ item.key }} - {{ item.value.name }} 
</div>

Answer 2

使用Angular 6.1的最新版本，您可以使用键值管道来做到这一点。

<div *ngFor="let item of data| keyvalue">
   {{item.value.name}} 
</div>

在Angular中的* ngFor中打印对象项

2 个答案: