Как я могу поместить два ngFor в один div
У меня есть форма, содержащая список флажков.
Я хочу отображать ввод формы перед каждым флажком, когда этот флажок установлен
Это мой html:
<div class = "checkbox">
<label formArrayName = "coverages" *ngFor = "let coverage of coverageFormArray.controls;let i = index; let val of coverageFormArray.value;">
<input type = "checkbox" kendoCheckBox [formControlName] = "i"/>
{{coveragestypes[i]}}
<div *ngIf = "val">
<input type = "text">
</div>
</label>
</div>
Но здесь форма ввода отображается всегда, независимо от того, установлен флажок или нет! Я думаю, проблема связана с директивой ngFor, где я поставил два цикла let coverage of coverageFormArray.controls и let val of coverageFormArray.value? Кто-нибудь может мне помочь ?
Ответы 1
Вы не можете использовать несколько *ngFor в одном и том же элементе, так как это структурные директивы, и angular обрабатывает их определенным образом (в основном для каждой структурной директивы создается элемент ng-template, который затем содержит саму директиву, вы можете узнать больше об этом здесь :
https://angular.io/guide/structural-directives понимание этого действительно проясняет, почему мы не можем иметь несколько структурных директив для одного и того же элемента).
Таким образом, вы не можете использовать два ngFor для одного и того же элемента, но вы можете использовать индекс, если оба массива имеют одинаковый размер, чтобы проверить, есть ли значение.
Вы не привели пример формата данных, поэтому я, вероятно, приведу пример, который придется адаптировать.
<div class = "checkbox">
<label formArrayName = "coverages" *ngFor = "let coverage of coverageFormArray.controls;let i = index;">
<input type = "checkbox" kendoCheckBox [formControlName] = "i"/>
{{ coveragestypes[i] }}
<div *ngIf = "coverage.value">
<input type = "text">
</div>
</label>
</div>
Кроме того, я рекомендую использовать ng-container вместо тега html, который используется только для применения директивы Angular.
Так что мое окончательное решение будет.
<div class = "checkbox">
<label formArrayName = "coverages" *ngFor = "let coverage of coverageFormArray.controls;let i = index;">
<input type = "checkbox" kendoCheckBox [formControlName] = "i"/>
{{ coveragestypes[i] }}
<ng-container *ngIf = "coverage.value">
<input type = "text">
</ng-container>
</label>
</div>
@DarioPiotrowicz Это должно быть в ответе. Не могли бы вы добавить его?
Конечно, это будет мое удовольствие :)
Нет проблем, спасибо за оценку вклада :)
Хороший ответ :), я хотел бы добавить, что невозможность использования двух
*ngForсвязана с тем, что они являются структурными директивами, которые фактически создаютng-templateэлементы под капотом (как вы можете видеть здесь angular.io/guide/structural-directives). Понимание этого проясняет, почему к одному и тому же элементу можно применять не более одной структурной директивы :)