Question

我有这个html代码：

 <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas"
                class="chip"
                [ngClass]="{'chip-selecionado' : isClassVisible}"
                [selected]="idioma"
                (click)="isClassVisible = !isClassVisible;changeSelected('s', idioma)">
        {{ idioma.nome }}
      </mat-chip>
    </mat-chip-list>
  </div>

当我单击芯片时，所有类都发生了变化，而不仅仅是单击的芯片。我正在使用Angular5。

我希望只是单击的元素可以更改css

之前和之后看这张照片

之前：

之后：

有人可以帮忙吗？

Answer 1

我建议您将index存储在isClassVisible中，并将其重命名为visibleClassIndex之类，然后通过检查当前{{ 1}}与[ngClass]一起使用，由于将有index个值为visibleClassIndex的索引，我建议您将0类型定义为false或{ {1}}并像visibleClassIndex或null | number一样进行检查，如果您选择undefined | number，请确保将visibleClassIndex !== null && visibleClassIndex === i指定为默认值visibleClassIndex !== undefined && visibleClassIndex === i，我会建议使用null，因为您无需定义默认类型，因为默认类型将自动为null

visibleClassIndex: null | number = null;

Answer 2

解决方案：-

Stackblitz链接：-https://stackblitz.com/edit/angular-material-jyzotv?file=app%2Fapp.component.html

 <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas;let isFirst = first"
                  [selected]="tab === idioma"
                  class="chip"
                 [class.active]="tab === idioma"
               (click)="activateClass(idioma)">
        {{ idioma }}
      </mat-chip>
    </mat-chip-list>
  </div>

  <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas;let isFirst = first"
                  class="chip"
                 [class.active]="tab === idioma"
               (click)="activateClass(idioma)">
        {{ idioma }}
      </mat-chip>
    </mat-chip-list>
  </div>

-

export class AppComponent  {
  idiomas = ['A','B','C']
  tab = this.idiomas[0];

  activateClass(subModule){
  this.tab = subModule;    
}
}

* NgFor中的带条件的类

2 个答案: