Angular ngFor 将子数组读入列表项答案

【问题标题】：Angular ngFor reading subarrays into list-itemsAngular ngFor 将子数组读入列表项
【发布时间】：2019-02-18 13:13:25
【问题描述】：

我正在使用 mat-list-item 构建一个 mat-list。我在将子数组读入列表 UI 控件时遇到问题。它显示为空白。对于不涉及子数组的集合部分，它会显示出来，但子数组中的数据不会被我的 ngFor 角度代码错误地读取。

我用谷歌搜索并尝试更改 ngFor 代码。我在 mat-list 和 mat-list-item 标签之间移动了它，但 UI 显示的是空单元格。

集合 Sale 有一个周末字符串，我可以毫无问题地显示它。我将 ngFor 设置为在 saleWeekdays 的几天内循环，这样我就可以通过每天的数组集合来阅读。在每天的集合中，我想添加度量以显示值字符串和 subCategory 数组，我需要添加另一个 *ngFor 循环。

非常感谢任何帮助。谢谢。

【问题讨论】：

标签： angular typescript

【解决方案1】：

您必须使用另一个 ngFor 来获取内部循环值。

您无法从以下代码中获取值。所以不要使用下面的代码

   <mat-list-item fxLayoutAlign="end" (click)="onRowClicked(value)" *ngFor="let day of saleWeek.days"><span>{{day.value}}</span></mat-list-item>

                        </mat-list>

您可以使用以下代码代替：

<div class="sub_container"  *ngFor="let subsaleWeek of  saleWeek.days "> 
<mat-list-item fxLayoutAlign="end" (click)="onRowClicked(value)" *ngFor="let day of subsaleWeek.day"><span>{{day.value}}</span></mat-list-item>

                    </mat-list> 
</div>

【讨论】：

加油！！ @c0micrage
感谢您抽出宝贵时间回答我的问题。再次感谢。

【解决方案2】：

问题是您错误地访问了您的 json：

"let day of saleWeek.days"

会给你这部分 json:

{ day: [] }

如果要访问值，需要迭代两次：

"let days of saleWeek.days"
"let dayInformation of days.day"

days.day 部分将在哪里访问您的 day 数组。然后你就可以访问你的值了：

{{dayInformation.value}}

查看这个 jsfiddle 以获得示例实现： https://jsfiddle.net/9o48jqty/

【讨论】：

嗨，我根据你的建议更改了我的代码，但仍然是空单元格：

{{dayInfo.value}}

跨度>
您仍然需要遍历他们的 saleWeeks。因此，如果您有 3 个嵌套数组，则需要遍历所有数组： *ngFor="let saleWeek of sales" *ngFor="let days of saleWeek.days" *ngFor="let dayInformation of days"
我做到了。第一个 div 是 ngFor="let saleweek of sales"> 在子 div 中我添加了 ngFor="let days of saleweek.days"。在这个细分中，我添加了 mat-list-item 以及让 dayInfo 为 days.day。
感谢您抽出宝贵时间回答我的问题。再次感谢。