javascript - 单击(单击)时 Angular 6 更改最近的图标

Question

我有一个列表，在左侧显示一个插入符号图标，单击它时应该更改图标。每当我单击一个图标时，所有图标都会更改。

<div class="caret" *ngIf="summary.isSupervisor" style="position: absolute; left: 15px; cursor: pointer;" (click)="openSubordinateInfo(i, summary)">
  <i class="zmdi zmdi-caret-right" style="vertical-align: middle;"></i>
</div>

detailedInfo = [];
subordinateInfo;

openSubordinateInfo(i, summary) {
  this.subordinateInfo = summary;

  if (this.detailedInfo[i]) {
    this.detailedInfo[i] = false;
    $(".caret i").toggleClass("zmdi-caret-down zmdi-caret-right");
  } else {
    this.detailedInfo[i] = true;
    $(".caret i").toggleClass("zmdi-caret-right zmdi-caret-down");
  }
}

Answer 1

避免在 Angular 应用程序中使用 jQuery。几乎总会有一个使用 Angular 的解决方案。

在这种情况下，您可以使用 ngClass 直接在 HTML 中更改图标。

<div class="caret" *ngIf="summary.isSupervisor" style="position: absolute; left: 15px; cursor: pointer;" (click)="openSubordinateInfo(i, summary)">
    <i class="zmdi" [ngClass]="{'zmdi-caret-down': detailedInfo[i], 'zmdi-caret-right': !detailedInfo[i]}" style="vertical-align: middle;"></i>
</div>

这将根据给定的条件有条件地应用类。

那么您的openSubordinateInfo 函数将如下所示

openSubordinateInfo(i, summary) {
    this.subordinateInfo = summary;
    this.detailedInfo[i] = !this.detailedInfo[i];
    // Add other logic here
}