Angular ngFor reading subarrays into list-items

1
votes

I am building a mat-list with mat-list-item. I am having problems with reading the subarrays into my list UI control. It shows up blank. For the part of the collection that does not involve subarrays, it shows up but the data in the subarrays are not incorrectly read with my ngFor angular code.

I googled and tried changing the ngFor code. I moved it between the mat-list and mat-list-item tags but the UI shows empty cells.

The collection Sale has a weekending string, which I can display without problem. I set the ngFor to loop thru days of saleWeekdays so I can read thru each day array collection. Within each day collection, I want to accces the metric to display the value string and the subCategory array, which I will need to add another *ngFor loop.

Any help is greatly appreciated. Thanks.

2
angulartypescript

2 Answers

1
votes

You have to use another ngFor to get the inner loop values.

You cant get values from the following code. So don't use the following code

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

                        </mat-list>

You can use the following code instead:

<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>
1
votes

The issue is that you are accessing your json incorrectly:

"let day of saleWeek.days"

will give you this part of your json:

{ day: [] }

If you want to access the value, you need to iterate twice:

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

Where the days.day part will access your day array. Then you can access your value:

{{dayInformation.value}}

Check out this jsfiddle for an example implementation: https://jsfiddle.net/9o48jqty/