如何使用* ngFor迭代多维数组

Question

如何在网址数组下进行迭代。

https://jsonplaceholder.typicode.com/users

Answer 1

这里到底是什么多维？ 无论如何，您可以使用*ngFor来做到这一点，而不会出现任何问题。 只是一个例子；假设您的TS文件中有一个persons数组，每个人都可以扮演多个角色。

  <div *ngFor="let person of persons">
    <div *ngFor="let role of person.roles">
      {{role}}
    </div>
  </div>

只需确保在AppModule中包含CommonModule：

import { CommonModule } from "@angular/common";

编辑： 您的数组不是多维的。您只能使用一个*ngFor来访问嵌套属性：

    <div *ngFor="let person of persons">
      {{person.company.name}}
    </div>

Answer 2

提供的数组不是多维数组。它只是一个带有对象的数组。您可以按常规方式使用* ngFor。

*ngFor="let user of users"

您可以访问每个用户对象及其属性

{{user. name}}

还有这样的内部属性

{{user.address.street}}

Answer 3

拳头我想建议你经历https://stackoverflow.com/help/how-to-ask

您的问题的答案是：

TS组件

public objects: Array<any> = [your_array];

HTML组件

<div *ngFor="let obj of objects">
    <div> {{ obj.id }}</div>
    <div> {{ obj.name }}</div>
</div>