如何在单击时删除按钮（Angular）？答案

【问题标题】：How can I delete a button upon click (Angular)?如何在单击时删除按钮（Angular）？
【发布时间】：2021-07-22 21:16:30
【问题描述】：

我有一个按钮组件，其样式看起来像一个药丸（因此它可以以选项卡为焦点以实现可访问性），我计划重用它来显示用户正在搜索的关键字。我希望能够在单击 X 图标时删除“按钮”/关键字。我设置了它，如果“关键字”是一个空字符串，按钮将不会显示，我尝试设置点击事件以将关键字更改为空字符串，但即使这样也不起作用（而且它不是无论如何都是理想的解决方案）。到目前为止，这是我所拥有的：

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 绑定到图标而不是正确定位。理想情况下，我希望按钮完全删除，而不仅仅是隐藏。如果问题表明我的无知，请原谅我；我是新手！

【问题讨论】：

你有一个@Input 绑定keyword，尝试通知父级（关键字来自哪里）像这样：@Output() clearKeyword = new EventEmitter(); 内部clear 方法this.clearKeyword.emit()
@robert 谢谢。我在课堂上添加了`@Output() clearKeyword = new EventEmitter();` 和clear() {this.clearKeyword.emit();}，但它不起作用。是因为关键字输入是由用户给出的吗？换句话说，?
添加类似的处理程序：<keywordComponent keyword="keyword" (clearKeyword)="keyword = ''"></keywordComponent>
你应该使用(click)而不是onClick()，这是角度方式
天哪，@Andres2142。这实际上就是它所需要的。叹。谢谢！

标签： angular angular-ng-if

【解决方案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);
    }
  }

更完整的demo

【讨论】：