如何使用 *ngFor 迭代多維數組

Question

如何在 Url 數組下迭代。

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>