Angular ng用于将子数组读入列表项

Question

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

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

Sale系列有一个周末字符串，我可以毫无问题地显示。我设置ngFor循环到saleweekdays的日子，所以我可以通过每天的数组集读取。在每天的集合中，我想要使用度量来显示值字符串和subCategory数组，我需要添加另一个* ngFor循环。

任何帮助是极大的赞赏。谢谢。

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

Answer 2

问题是您正在错误地访问您的json：

"let day of saleWeek.days"

会给你这部分你的json：

{ day: [] }

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

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

days.day部分将访问您的日期阵列。然后你可以访问你的价值：

{{dayInformation.value}}

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