Angular ngfor устанавливает пустую сетку, если условие соответствует
Я зацикливаю массив, длина которого может измениться в строке из трех столбцов (в представлении на рабочем столе.
HTML
<div class = "row" >
<div *ngFor = "let indicator of fiveElements; let index = index"
class = "col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 pb-4 pl-3 pr-3 indicatorContainer">
<div>{{index}}</div>
</div>
</div>
тс
export class AppComponent {
fiveElements = [1,2,3,4,5]
}
Я бы хотел, чтобы при длине массива, равной 4, третий столбец был пуст.
Вот схема для пояснения
Вот демо
Я обновил демо, надеюсь стало понятнее
Ответы 1
Если я правильно понял ваш вопрос - я бы сделал это так:
<div class = "row">
<div *ngFor = "let indicator of fourElements; let index = index" class = "col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 pb-4 pl-3 pr-3 indicatorContainer">
<div *ngIf = "index !== 3 && fourElements.length === 4">{{index}}</div>
<!--- third column should get empty -->
</div>
</div>
Спасибо за разъяснения - теперь я знаю, что вы хотите :) Вы можете добиться этого, используя длинный синтаксис для ngFor:
<div class = "row">
<ng-template ngFor let-indicator [ngForOf] = "fourElements" let-index = "index">
<div *ngIf = "index === 2 && fourElements.length === 4" class = "col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 pb-4 pl-3 pr-3 indicatorContainer">
</div>
<div class = "col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 pb-4 pl-3 pr-3 indicatorContainer">
<div>{{index+1}}</div>
</div>
</ng-template>
</div>
Это скроет третий элемент. Я хотел бы нажать только два элемента в первой строке + пустой столбец и два элемента в следующей строке.
Спасибо, я пытаюсь понять разницу между неделями * ngfor и ngForOf, если я использую ваше решение с * ngfor, которое не работает, почему?
*ngFor - это просто сокращенный синтаксис для более чистого кода - в конце концов, он делает то же самое. Проблема с *ngFor в вашей ситуации заключается в том, что вы определяете цикл for для элемента div. Но вы хотите добавить div на том же уровне между одним циклом - это может работать только тогда, когда родитель div проходит через цикл. С помощью длинного синтаксиса вы определяете его в родительском шаблоне ng, поэтому у вас больше контроля над ним и вы можете разместить другой div с условием if. Надеюсь, вы понимаете разницу. Документы: angular.io/api/common/NgForOf#описание
Используйте
*ngIf, чтобы проверить длину вашего массива и сделать то, что вы хотите