如何使用 ngFor 遍历 objects 数组中的 objects 数组？ (angular 8 +)

Question

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

我有一个 API 调用，它 return 是一个 object 的数组（DocumentHead）：

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

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

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

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

DocumentHead.documents[0].id 将 return 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 Object]' 的差异。 NgFor 仅支持绑定到 Iterables，例如数组。

（不允许“let docs of docHead.documents”，给出错误：类型 DocumentsModel 不可分配给类型（DocumentsModel 和 NgIterable）|未定义 |无效的 )

尝试过

中的代码

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

并得到这个输出

这接近我想要的。（在 html 组件中出现错误：参数类型 DocumentsModel 不可分配给参数类型 {[p: string]: number |字符串 |布尔值 ...>)

如何遍历 docHead.documents 以便我的列表显示所有文档的 ID？

预计到达时间模型和调用

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 元素。

如何使用 ngFor 遍历 objects 数组中的 objects 数组？ (angular 8 +)

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

ngfor

angular