Html 如果条件匹配，则设置空网格的角度

我正在循环一个数组，它的长度可以在三列行（桌面视图）上更改

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>

我希望当数组长度等于4时，第三列为空

这里有一个模式来解释

如果我正确理解了你的问题，我会这样做：

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

{{index}}

谢谢你的澄清-现在我知道你想要什么了：） 您可以通过使用ngFor的longhand语法来实现这一点：

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

{{index+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>

{{index}}

谢谢你的澄清-现在我知道你想要什么了：） 您可以通过使用ngFor的longhand语法来实现这一点：

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

{{index+1}}

使用

*ngIf

测试数组的长度并执行您想要的操作我更新了我的演示，希望更清晰使用

*ngIf

测试数组的长度并执行您想要的操作我更新了我的演示，希望更清晰这将隐藏第三个元素，我要强调的是，第一行只有两个元素+空列，下一行有两个元素谢谢，我正在试图理解betweek*ngfor和ngForOf之间的区别，如果我用你的解决方案*ngfor不起作用，为什么？*ngfor只是更干净代码的简写语法-最后它也会这样做。在您的情况下，*ngFor的问题是在div元素上定义for循环。但是您希望在一个循环之间的同一级别上添加一个div-这仅在div的父循环通过时才起作用。使用longhand语法，您可以在父ng模板上定义它，因此您可以对它进行更多的控制，并可以使用if条件放置另一个div。我希望你能理解其中的区别。Docs:这将隐藏第三个元素，我要推的是，第一行只有两个元素+空列，下一行有两个元素谢谢，我正在试图理解Week*ngfor和ngForOf之间的区别，如果我使用你的解决方案，*ngfor不起作用，为什么？*ngFor只是更干净代码的简写语法——最终它也会这样做。在您的情况下，*ngFor的问题是在div元素上定义for循环。但是您希望在一个循环之间的同一级别上添加一个div-这仅在div的父循环通过时才起作用。使用longhand语法，您可以在父ng模板上定义它，因此您可以对它进行更多的控制，并可以使用if条件放置另一个div。我希望你能理解其中的区别。文件：