Question

在第四个元素添加到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++; 
    }
}

Answer 1

您不需要任何柜台。您需要每个跨度的索引：

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

或者，由于click的值为索引，因此您可以使用其值：

{{1}}

在通过特定索引的循环创建的元素上添加类

1 个答案: