如果條件匹配，則角度ngfor設置空網格

Question

我在循環一個數組，它的長度可以在三列的行上更改（在桌面視圖上。

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>

ts

export class AppComponent  {
fiveElements = [1,2,3,4,5]

}

我希望當數組長度等於4時，第三列為空

這是一個解釋的模式

這是一個演示

Answer 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>