要实现“Angular材料芯片可移除”,可以使用Angular Material库中的MatChip组件,并结合一些事件处理来实现移除功能。以下是一个示例代码:
{{ chip }}
cancel
import { Component } from '@angular/core';
@Component({
selector: 'app-chip',
templateUrl: './chip.component.html',
styleUrls: ['./chip.component.css']
})
export class ChipComponent {
chips = ['Chip 1', 'Chip 2', 'Chip 3'];
removeChip(chip: string) {
const index = this.chips.indexOf(chip);
if (index >= 0) {
this.chips.splice(index, 1);
}
}
}
import { MatChipsModule } from '@angular/material/chips';
@NgModule({
imports: [
// ...
MatChipsModule
],
// ...
})
export class AppModule { }
这样,当用户点击芯片旁边的“cancel”图标时,对应的芯片将会被移除。
上一篇:Angular材料芯片多选问题