时间戳

首页 > 解决方案 > 在通过某个索引的循环创建的元素上添加一个类

angular - 在通过某个索引的循环创建的元素上添加一个类

问题描述

在将第四个元素添加到 DOM 之后，我试图ngClass在任何 span 元素上添加一个类（通过单击按钮来增加counter变量并切换段落的可见性），但我不知道如何使其成为前四个跨度中的任何一个在达到第五个跨度后也不会添加此类的位置。我觉得这很容易实现，但我被卡住了。

我尝试向 中添加索引*ngFor，然后根据索引添加类，但这产生了相同的结果。

模板：

<p *ngFor="let click of buttonClicks;">
    <span [ngClass]="{ 'white': counter > 4 }">{{ [click] }}</span>
</p>

<button (click)="displayDetails()">Display Details</button>

<p *ngIf="detailsVisible">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus quasi id, molestiae doloremque alias non adipisci placeat corrupti commodi minus voluptas debitis eaque iure obcaecati minima neque et molestias atque.</p>

零件：

export class AppComponent {

    detailsVisible: boolean = false;

    buttonClicks: Array<number> = [];
    counter: number = 0;

    displayDetails() {
      this.detailsVisible = !this.detailsVisible;
      this.buttonClicks.push(this.counter);
      this.counter++; 
    }
}

标签： angular

解决方案

你不需要任何计数器。您需要每个跨度的索引：

<p *ngFor="let click of buttonClicks; index as i">
  <span [ngClass]="{ 'white': i > 4 }">{{ [click] }}</span>
</p>

或者，由于 click 的值是索引，您可以只使用它的值：

<p *ngFor="let click of buttonClicks">
  <span [ngClass]="{ 'white': click > 4 }">{{ [click] }}</span>
</p>

推荐阅读