Angular ngModelChange 和清除输入的按钮

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 函数？

这是一个显示问题的 stackblitz 示例：https://stackblitz.com/edit/angular-yk7wbc

Answer 1

在点击清除按钮时使用searchSeries功能：

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

Answer 2

您可以使用 ng click 指令调用函数，就像这样...

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

然后你就可以随心所欲了...

someFunctionInTheComponentsTsFile() {
    // do stuff
}

Angular ngModelChange 和清除输入的按钮

Angular ngModelChange and button to clear the input

angular-directive

angular