角度 ng 模型更改和按钮以清除输入

Question

>我有一个文本输入，用于在后端搜索数据。

在输入中输入某些内容时，会出现一个清晰的按钮以重置字段值。 如果我在输入中输入或删除字符，我有一个指示输入内容的日志。

但是，如果我单击该按钮，则不会触发日志(我需要它来从服务器查询未过滤的数据集(

// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
search = null;
public searchSeries(value: string) {
console.log(value); // this log is not called when the input is cleared via the button
}
}

---

// app.component.html
<input type="text" placeholder="Search" (ngModelChange)="searchSeries($event)" [(ngModel)]="search">
<button *ngIf="search"  aria-label="Clear" (click)="search=null">
clear
</button>

通过clear按钮清除输入时如何调用searchSeries函数？

这是一个堆栈闪电战示例 https://stackblitz.com/edit/angular-yk7wbc，显示了这个问题：

Answer 1

您可以使用ngclick指令调用函数，如下所示...

<button *ngIf="search"  aria-label="Clear" (click)='someFunctionInTheComponentsTsFile()'>
clear
</button>

然后你可以做你喜欢的事情...

someFunctionInTheComponentsTsFile() {
// do stuff
}

Answer 2

使用searchSeries单击清除按钮的功能：

<button *ngIf="search"  aria-label="Clear" (click)="searchSeries(search); search=null">
clear
</button>