如何在单击(Angular)时删除按钮

Question

我有一个按钮组件，它看起来像一个药丸(因此它可以是可访问的选项卡焦点(，我计划重用它来显示用户正在搜索的关键字。我希望能够删除"；按钮"/关键字。我把它设置成；关键字"；是一个空字符串，按钮不会显示，我尝试设置click事件将关键字更改为空字符串，但即使这样也不起作用(无论如何，这不是理想的解决方案(。到目前为止，我拥有的是：

HTML:

<button *ngIf="keyword" onClick="clear()">
{{keyword}}
<i class="icon" aria-label="clear"></i>
</button>

(X图标是通过CSS添加的。(

TS:

export class keywordComponent implements OnInit {
@Input() keyword?: string = '';
ngOnInit(): void {}
clear() {
this.keyword = '';
}
}

我知道onClick绑定到按钮，而不仅仅是图标，但我认为这可能是因为如果我将其绑定到图标，this.keyword将无法正确定位。理想情况下，我希望按钮完全删除，而不是隐藏。如果这个问题表明我无知，请原谅我；我是新手！

Answer 1

基本上我假设关键字存储在数组中

keywords = ['apple', 'google', 'oracle'];

然后显示：

<ng-container *ngFor="let keyword of keywords">
<app-keyword (clearKeyword)="onClearKeyword($event)" [keyword]="keyword"></app-keyword>
</ng-container>

一旦触发clearKeyword，此方法将尝试查找关键字并将其从keywords数组中删除：

onClearKeyword(keyw: string): void {
console.log('clear keyword:', keyw);
const index = this.keywords.indexOf(keyw);
if (index !== -1) {
this.keywords.splice(index, 1);
}
}

更完整的演示