ngFor 使用 angular 7 迭代内部数组 object 数组

Question

I have this 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",

                }
            ]

I want to show this title Title: "CEO & Presidents Environmental Message" {{item?.Contents.Title}} but I used not correct and show

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Can you share with me any idea how to use *ngFor in this part?

Answer 1

I've created an example of what you're asking, basically it uses two *ngFor to go through the data.

You need a first ngFor to iterate the array of items you provided.

Then a second ngFor to iterate the array of Contents for each item iterated above.

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

This is the stackblitz example i've made that shows both iterations.

I advice you to check Angular documentation about structural directives (ngIf,ngFor,...).