时间戳

首页 > 解决方案 > 点击事件后的角度搜索

angular - 点击事件后的角度搜索

问题描述

我最近正在使用 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 吗？

谢谢

标签： angularbuttonsearchvisual-studio-codeangular-material

解决方案

改变(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

推荐阅读