* NgFor中的带条件的类

时间:2018-11-14 18:30:52

标签: angular html5 angular-template

我有这个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

之前和之后看这张照片

之前enter image description here

之后enter image description here

有人可以帮忙吗?

2 个答案:

答案 0 :(得分:1)

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

visibleClassIndex: null | number = null;

答案 1 :(得分:1)

解决方案:-

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;    
}
}