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

Question

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

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

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

每个 DocumentHead 总是有一个文档条目，所以下面的代码可以工作（有点）

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

（代码 {{docHead.documents.id}} 表示未定义）

DocumentHead.documents[0].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 只支持绑定到 Arrays 等 Iterables。

（它不允许“让 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 |字符串 |布尔值…>)

如何遍历 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 元素。