NgIf может ссылаться на переменную во вложенном ngFor в Angular 1.5. Как добиться того же в Angular 10?
Следующий код работает в Angular 1.5. Элемент <tr> будет отображаться только в том случае, если флаг showFields для этого ключа строки включен.
<table>
<ng-container *ngIf = "showFields[row.key]">
<tr *ngFor = "let row of rows">
<td>{{row.key}}</td>
<td>{{row.value}}</td>
</tr>
</ng-container>
</table>
Обратите внимание, что переменная row из ngFor видна для включающего ngIf. Это больше не работает в Angular 2+, потому что область действия переменной ngFor теперь ограничена элементом. Как я мог добиться такого же эффекта?
Ответы 1
Вы можете просто поменять местами ngFor и ngIf, вот так:
<table>
<ng-container *ngFor = "let row of rows">
<tr *ngIf = "showFields[row.key]">
<td>{{row.key}}</td>
<td>{{row.value}}</td>
</tr>
</ng-container>
</table>
Вместо использования отдельного логического массива showFields вы также можете подумать о добавлении нового свойства showField к объекту строки, тогда вы можете просто проверить *ngIf = "row.showField", что предотвращает исключения за пределами границ.
Кроме того, showFields является объектом, поэтому здесь нет проблем с границами, и его содержимое динамически изменяется, когда пользователь нажимает переключатели в пользовательском интерфейсе, чтобы показать или скрыть поля. Однако оцените помощь.
Извините, я должен был упомянуть, что я попробовал, и это не сработало. Но оказалось, что это не сработало по другой причине. Моя переменная rows — это объект, а не массив. Поэтому мне нужно было сделать это *ngFor = "let row of rows | keyvalue", чтобы он работал с Angular 10. Ваш ответ правильный, хотя в соответствии с заданным вопросом. Большое спасибо.