要使Angular Material的mat-chips可移除,您需要使用matChipRemove属性。以下是一个示例代码,演示了如何将mat-chips设置为可移除:
HTML模板:
{{chip}}
cancel
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-chip-demo',
templateUrl: 'chip-demo.component.html',
styleUrls: ['chip-demo.component.css'],
})
export class ChipDemoComponent {
chips: string[] = ['Chip 1', 'Chip 2', 'Chip 3'];
removeChip(chip: string): void {
const index = this.chips.indexOf(chip);
if (index >= 0) {
this.chips.splice(index, 1);
}
}
}
在上述示例中,我们使用[removable]="true"
属性将mat-chip设置为可移除。当用户点击mat-icon元素时,将触发(removed)
事件,并调用removeChip方法来移除相应的chip项。
希望这能帮助到你!