ngFor 使用 angular 7 迭代內部數組 object 數組

Question

我有這個 JSON

[

        {
            Id: "14",
            Title: "HR Europe",
            Description: "HR Europe",
            Color: "3B23FF",
            Contents: [
                {
                    Id: "15",
                    Title: "W.I.D.E Experience",
                    Description: "Discover our Value!",
                    Date: new Date('2019-12-02'),
                    Type: "content",
                  },
                {
                    Id: "17",
                    Title: Experience",
                    Description: "Discover our Value!",
                    Date: new Date('2019-12-02'),
                    Type: "content",
                }
            ]
        },
        {
            Id: "12",
            Title: "Company",
            Description: "Company",
            Color: "4FFF26",
            Contents: [
                {
                    Id: "13",
                    Title: "CEO & Presidents Environmental Message",
                    Description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
                    Date: new Date('2020-02-13'),
                    Type: "content",
                }
            ]
        },
        {
            Id: "8",
            Title: "Engine",
            Description: "Engine",
            Color: "FF4F0C",
            Contents: [
                {
                    Id: "10",
                    Title: "Pre Bunker Training",
                    Description: "yyyyyyyyyyyyyyyyyyyyyyyyyyyyy",
                    Date: new Date('2019-12-02'),
                    Type: "content",
                   },
                {
                    Id: "11",
                    Title: "Exhaust Gas Cleaning System pH-Sensor cleaning",
                    Description: "uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu",
                    Date: new Date('2019-12-02'),
                    Type: "content",

                }
            ]

我想顯示此標題Title: "CEO & Presidents Environmental Message" {{item?.Contents.Title}}但我使用不正確並顯示

找不到不同的支持 object '[object Object]' 類型為 'object'。 NgFor 僅支持綁定到 Iterables，例如 Arrays。

你能和我分享一下如何在這部分使用*ngFor嗎？

Answer 1

我已經創建了一個您所要求的示例，基本上它通過數據使用兩個 *ngFor 到 go。

您需要第一個 ngFor 來迭代您提供的項目數組。

然后第二個 ngFor 為上面迭代的每個項目迭代 Contents 數組。

<div *ngFor="let item of items">
  <div *ngFor="let content of item.Contents">
    {{content.Title}}
  </div>
</div>

這是我制作的stackblitz 示例，顯示了兩次迭代。

我建議您查看有關結構指令(ngIf,ngFor,...) 的 Angular 文檔。