如何使用ngFor遍历对象数组中的对象数组？(角度8 +)

Question

我在这里搜索并找到了一些信息：Iterate array inside object Angular 6，但我无法让它正常工作。

我有一个API调用，它返回一个对象数组(DocumentHead)：

​

​

其中每一个都有一个名为documents的对象数组：

​

​

每个DocumentHead总是有一个文档条目，所以下面的代码可以工作(某种程度上)

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

(代码{{docHead.documents.id}}表示未定义)

DocumentHead.documents.id将为这5个条目中的每个条目返回至少1个条目id。我想要的是，对于每个DocumentHead，它将列出我当前拥有的文档中的每个条目的id：

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

但出现错误:找不到类型为' object‘的不同支持对象'object Object’。NgFor仅支持绑定到迭代对象，如数组。

(它不允许“let docs of docHead.documents，给出错误:类型DocumentsModel不可赋值给类型(DocumentsModel & NgIterable) |未定义|空)

来自Loop through array of JSON object with *ngFor (Angular 4)的试用代码

<div *ngFor="let recipient of docHead.documents | keyvalue">
  {{recipient.key}} --> {{recipient.value}}
</div>

并获得以下输出

​

​

这就是我想要的。(在html组件中遇到错误:参数类型DocumentsModel不可分配给参数类型{p: string: number | string | boolean…>)

如何在docHead.documents上迭代，使我的列表显示所有文档的id？

ETA模型和呼叫

DocumentHeadModel：

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


export class DocumentsModel {
 id: string;
}

呼叫：

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

Answer 1

如果您有：

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

你想要：

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

您将使用：

<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>

如果您愿意：

-- 101
-- 201
-- 202

您将使用：

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

注意，您希望在第二种情况下使用ng-container，因为您不希望在ol和li元素之间创建一个HTML元素。