Question

如何使用*ngFor在Angular中显示数组中的数据？

app.component.ts

list = {
    "one": [
      {
        "name": "a",
        "active": false
      },
      {
        "name": "b",
        "active": false
      }
    ],
    "two": [
      {
        "name": "c",
        "active": false
      },
      {
        "name": "d",
        "active": false
      }
    ]
  };

app.component.html

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

在这种情况下，*ngFor的嵌套似乎不起作用，但我不知道为什么。

stackblitz

Answer 1

您的外部“列表”根本没有列表。它是一个对象。由于对象不是按规范严格排序的，因此Angular的ngFor不能对其进行迭代。

但是，在Angular 6.1中引入了一个新管道，它实际上也使对象可迭代，即KeyValue管道。

因此，如果您使用的是Angular 6.1，则可以使用它。否则，您将不得不自己实现这样的管道，或者相应地在控制器中准备数据。

http://www.talkingdotnet.com/angular-6-1-introduces-new-keyvalue-pipe/

Answer 2

使用keyvalue管道

Stackblitz Demo

<div *ngFor="let item of list | keyvalue">

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

如果您使用角度5和6

<div *ngFor="let item of getListData">

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

get getListData(){
    return Object.keys(this.list)
}

角度-如何显示数组中的数据？

2 个答案: