*NgFor 中的条件 class 和 angular

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>

当我点击筹码时，class 全部发生变化，而不仅仅是点击筹码。我正在使用 Angular 5.

我希望点击的元素能改变 css

前后看这张照片

之前：

之后：

有人可以帮忙吗？

Answer 1

我建议你将 index 存储在 isClassVisible 中并将其重命名为类似 visibleClassIndex 的名称，如果当前 class 是通过检查当前 index 和 visibleClassIndex 可见，因为会有 0 索引，即 false 值，我建议您将 visibleClassIndex 类型定义为 null | number 或 undefined | number 并像这样检查 visibleClassIndex !== null && visibleClassIndex === i 或 visibleClassIndex !== undefined && visibleClassIndex === i，如果您选择 null，请确保将 null 分配为默认值 visibleClassIndex: null | number = null;，我建议使用 undefined，因为有了它你不需要定义默认类型，因为它会自动成为 undefined

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

Answer 2

解决方法：-

Stackblitz Link:- 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 中的条件 class 和 angular

Conditional class in *NgFor with angular

html

angular-template

angular