我有这个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
之前和之后看这张照片
有人可以帮忙吗?
答案 0 :(得分: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;
答案 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;
}
}