Angular ngFor чтение подмассивов в элементы списка
Я создаю список матов с элементом мат-списка. У меня проблемы с чтением подмассивов в моем элементе управления пользовательского интерфейса списка. Он отображается пустым. Для части коллекции, которая не включает подмассивы, она отображается, но данные в подмассивах не считываются неправильно с моим угловым кодом ngFor.
Я погуглил и попытался изменить код ngFor. Я переместил его между тегами mat-list и mat-list-item, но пользовательский интерфейс показывает пустые ячейки.
Коллекция Sale имеет строку выходного дня, которую я могу отобразить без проблем. Я установил ngFor на цикл по дням продажиWeekdays, чтобы я мог читать коллекцию массивов каждый день. В коллекции каждого дня я хочу использовать метрику для отображения строки значения и массива подкатегорий, которые мне понадобятся для добавления еще одного цикла *ngFor.
Любая помощь приветствуется. Спасибо.
Ответы 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/
Вам все равно нужно будет повторить их saleWeeks. Итак, если у вас 3 вложенных массива, вам нужно перебрать их все: *ngFor = "let saleWeek of sales" *ngFor = "let days of saleWeek.days" *ngFor = "let dayInformation of days"
Я сделал. 1-й div - это ngFor = "let saleweek of sales"> В подразделе я добавил ngFor = "let days of saleweek.days". Внутри этого подраздела я добавил элемент mat-list-item с let dayInfo из days.day.
Спасибо, что нашли время ответить на мой вопрос. Еще раз спасибо.
Вы должны использовать другой 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
Спасибо, что нашли время ответить на мой вопрос. Еще раз спасибо.
Привет, я изменил свой код в соответствии с вашим советом, но все еще пустые ячейки: <div fxLayout = "row" fxFlex = "9%" fxFlex.gt-sm = "9%" *ngFor = "let days of saleWeek.days"> <div fxLayout = "column" fxFlex > <mat-list class = "wf-list" > <mat-list-item fxLayoutAlign = "end" (click) = "onRowClicked(value)" *ngFor = "let dayInfo дней .day"><span>{{dayInfo.value}}</span></mat-list-item> </mat-list> </div> </div>