我正在使用mat-chip过滤表,并且一切似乎都可以正常工作:
home.html
<mat-chip-list>
<mat-chip (click)="onSectorChipSelect(sector)" [color]="chipColor(sector)" *ngFor="let sector of sectors" selected>{{sector}}</mat-chip>
<mat-chip (click)="clearSectors()">
Clear
</mat-chip>
</mat-chip-list>
home.ts 将扇区添加到名为filteredSectors的列表中,该列表一次保存所有选定的扇区。
onSectorChipSelect(sector: string) {
if (this.filteredSectors.includes(sector)) {
this.filteredSectors.splice(this.filteredSectors.indexOf(sector), 1);
} else {
this.filteredSectors.push(sector);
}
}
home.ts (如果选择),此方法将芯片着色为蓝色(主色),否则保持白色(基本)。
chipColor(sector: string) {
if (this.filteredSectors.includes(sector)) {
return 'primary';
}
return 'basic';
}
“问题”是方法chipColor()绑定到芯片的color属性,因此在滚动或单击home组件时多次调用。我的猜测是,每次浏览器呈现时,都会再次调用该方法? (我真的不知道,也许有人可以解释?)
大约有20个扇区,所以我猜这不是性能问题吗?我觉得这很烦人,而不是一种好的做法。但是我该如何改变呢?
到目前为止,我尝试将每个芯片的颜色设置为白色(基本):
home.html
<mat-chip (click)="onSectorChipSelect(sector)" color="basic" *ngFor="let sector of sectors" selected>{{sector}}</mat-chip>
home.ts
@ViewChild(MatChipList) chipList: MatChipList;
获取带有ViewChild批注的chipList,然后遍历芯片并设置其颜色,但这不起作用。选择了第二个芯片后,第一个芯片再次变为白色。
onSectorChipSelect(sector: string) {
if (this.filteredSectors.includes(sector)) {
this.filteredSectors.splice(this.filteredSectors.indexOf(sector), 1);
} else {
this.filteredSectors.push(sector);
}
this.chipList.chips.forEach(chip => {
if(this.filteredSectors.includes(chip.value)) {
chip.selected = true;
chip.color = 'primary';
} else {
chip.selected = false;
chip.color = null;
}
});
}