Question

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

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

Sale系列有一个周末字符串，我可以毫无问题地显示它。我将ngFor设置为在saleWeekdays的几天内循环，这样我就可以遍历每一天的数组集合。在每天收集的数据中，我想访问该指标以显示值字符串和subCategory数组，这将需要添加另一个* ngFor循环。

任何帮助将不胜感激。谢谢。

Answer 1

问题是您无法正确访问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/

Answer 2

您必须使用另一个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>

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

2 个答案: