Arrays 如何使用ngFor或其他包含数组的对象迭代数据？

我有一个对象数组，看起来像这样：

[
    {
    id: 1,
    settings: "[{object},{object}]", <-- stringifiedJSON
    stats: "[{object}, {object}]" <-- stringifiedJSON
    },
    {
    id: 2,
    settings: "[{object},{object}]", <-- stringifiedJSON
    stats: "[{object}, {object}]" <-- stringifiedJSON
    },
]

一旦归档文件数组进行迭代，如果我尝试迭代统计数据，我会发现统计数据被迭代到归档文件的长度，并在一个部分中显示所有统计数据，而不是该归档文件id的统计数据数组。设置是相同的，以此类推

我理解为什么会发生这种情况，但我以前从未遇到过必须在特定对象所特有的数组中迭代出数组的情况

我四处寻找过一个先例，但还没有发现类似的问题

我基本上希望在最后迭代出类似的东西，但无法管理它

[1] 设置[1]统计信息

[2] 设置[2]统计信息

我现在得到的是：

[1] 设置，[2]设置，[1]统计，[2]统计

[1] 设置，[2]设置，[1]统计，[2]统计

---

是否有更好的方法在数据显示在组件中之前进行设置？我可以有效地索引ngfor循环以正确显示数据吗？我被难住了

在这里，您可以使用映射来迭代

存档

数组，并将

字符串化的JSON

转换为适当的

JSON对象

this.archives.map(x => {
    x.settings = JSON.parse(x.settings);
    x.stats = JSON.parse(x.stats);
});

然后，您可以在

设置中使用
*ngFor
，也可以在
统计中使用。示例
html
：

<div *ngFor="let archive of archives">
    <p>{{archive.id}}</p>
    <div *ngFor="let setting of archive.settings">
        <p>{{setting.<property>}}</p>
    </div>
    <div *ngFor="let stats of archive.stats">
        <p>{{stats.<property>}}</p>
    </div>
</div>


{{archive.id}

{{设置}}

{{stats.}}



this.archives.map(x => {
    x.settings = JSON.parse(x.settings);
    x.stats = JSON.parse(x.stats);
});

<div *ngFor="let archive of archives">
    <p>{{archive.id}}</p>
    <div *ngFor="let setting of archive.settings">
        <p>{{setting.<property>}}</p>
    </div>
    <div *ngFor="let stats of archive.stats">
        <p>{{stats.<property>}}</p>
    </div>
</div>