点击事件后的角度搜索

Question

我最近在使用 Angular，我需要帮助。

我有一张带有 Angular Material 的表格，在这张表格中我有很多项目，我有一个像这样的“搜索框”：

<mat-form-field>
  <input matInput [(ngModel)]="SearchText" placeholder="Filtra i risultati" style="color: black;">                     
</mat-form-field>

<button mat-button (click)="applyFilter($event.target.value)" class="search-button">
  <mat-icon>search</mat-icon>
</button>

TS

applyFilter(filterValue: string) {
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue;
}

实际上我想要达到的结果是，项目列表必须只有在框中写入内容并单击按钮后才会出现。

所以表格最初是空的。

我写了一些东西，然后单击搜索按钮，就会出现请求的结果。

我怎样才能得到这个结果？ 你能帮我处理 HTML 和 TS 吗？

谢谢

Answer 1

将(click)="applyFilter($event.target.value)" 更改为(click)="applyFilter(SearchText)"

$event.target.value 表示同一个输入元素的值，这里需要按钮元素的输入值。所以使用模型值SearchText

试试这样：

<mat-form-field>
   <input matInput [(ngModel)]="SearchText" placeholder="Filtra i risultati" style="color: black;">                     
</mat-form-field>

<button mat-button (click)="applyFilter(SearchText)" class="search-button">
  <mat-icon>search</mat-icon>
</button