How do I iterate through an array of objects inside an array of objects with ngFor? (angular 8 )-CodePudding

I have searched and found some information here:

Each of these has an object array called documents:

Each DocumentHead will always have an entry for documents so code below works (sort of)

<li *ngFor="let docHead of DocumentHead;">
  {{docHead.documents[0].id}}
</li>

(Code {{docHead.documents.id}} says it is undefined)

DocumentHead.documents[0].id will return at least 1 entry id for each of the 5 entries. What I want is that for each DocumentHead, it will list the id of each entry in documents I currently have this:

<li *ngFor="let docHead of DocumentHead;">
  <div *ngFor="let docs of docHead.documents[i]; let i = index; ">
    <h3> {{docs.category.name}} </h3>
  </div>
</li>

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

(It won’t allow “let docs of docHead.documents, gives error: Type DocumentsModel is not assignable to type (DocumentsModel & NgIterable) | undefined | null )

Tried code from

This is close to what I want. (In html component getting error: Argument type DocumentsModel is not assignable to parameter type {[p: string]: number | string | boolean …>)

How can I iterate over docHead.documents so that my list shows the id of all documents?

ETA Model and call

DocumentHeadModel:

export class DocumentHeadModel {
 id: string;
 documents: DocumentsModel;
}


export class DocumentsModel {
 id: string;
}

call:

getDocuments(id: any): Observable<DocumentHeadModel[]> {
   return this.http.get<DocumentHeadModel[]>(this.myURL?id=`   id);
 }

CodePudding user response：

If you have:

const documentHeads = [
    { 
        id: 1, 
        documents: [
            { id: 101, category: { name: 'Astrophysics' }}
        ] 
    },
    { 
        id: 2, 
        documents: [
            { id: 201, category: { name: 'Literature' }},
            { id: 202, category: { name: 'Mathematics' }} 
        ]
    }
];

And you want:

-- 1
    -- 101
-- 2
    -- 201
    -- 202

You would use:

<ol>
    <li *ngFor="let head of documentHeads">
        <p>{{ head.id }}</p>
        <ol>
            <li *ngFor="let doc of head.documents">{{ doc.id }}</li>
        </ol>
    </li>
</ol>

If you want:

-- 101
-- 201
-- 202

You would use:

<ol>
    <ng-container *ngFor="let head of documentHead">
        <li *ngFor="let doc of head.documents">{{doc.id}}</li>
    </ng-container>
</ol>

Note that you want to use ng-container in the second case because you don't want to create an HTML element between the ol and li elements.