Question

我有一个button标记，单击后将更改div标记的类。我使用的是ngFor，因此每一行都应单独对待。

这是我的代码段以及我想做什么。

  <div *ngFor="let item of users">
  <button class="fas fa-angle-up"></button>
  <strong>NAME </strong>{{item.attribute.name}}
  <div class="pf-m-expanded">Some Content Here</div> <!--This is the class that has to toggle upon clicking that **button**>
  </div>

我要做的是单击按钮，我应该能够切换（删除并激活课程）pf-m-expanded。并且由于它是*ngFor，因此应该分别处理每行。

Answer 1

您可以在循环内定义局部变量，并具有按钮来切换变量的值，然后使[ngClass]根据变量的值添加/删除类。

<div *ngFor="let item of users; let toggle = true;">
  <button class="fas fa-angle-up" (click)="toggle = !toggle">Test</button>
  <strong>NAME </strong>{{item.attribute.name}}
  <div [ngClass]="{ 'pf-m-expanded': toggle }">
    Some Content Here
  </div>
</div>

如何通过单击使用ngClass

1 个答案: