点击后的角度搜索功能答案

【问题标题】：Angular Search function after click点击后的角度搜索功能
【发布时间】：2019-11-29 13:32:38
【问题描述】：

我正在尝试在单击后过滤表格中的对象。

HTML

<form [formGroup]="form"  (ngSubmit)="onSubmit(searchValue)">
  <mat-form-field class="filter" floatLabel="never">
    <mat-label>Name</mat-label>
      <input matInput formControlName="nameFilter" [value]="searchValue">
  </mat-form-field> 

  <button mat-raised-button class="search">Search</button>
</form>

onSubmit(){

    this.ListService.getList(this.currentUser().my_token, this.form.value).then(res => {
      this.nameFilter.valueChanges.subscribe(name => {
      this.filterValue.name = name;
      this.dataSource.filter = JSON.stringify(this.filterValue);

      });
    })
  }

服务

getList(token, frm) {
    return new Promise((resolve, reject) => {
      return this.http.post<any>("my_path",
        {
          'token': token,
          'frm': 
          {
            'id': frm.id,
            'name' : frm.name
          }
    })

当我在输入中输入名称并单击搜索按钮时，我希望与输入名称匹配的所有名称都出现在表中。我哪里做错了？

【问题讨论】：

标签： angular search service onclick angular-material

【解决方案1】：

您可以对nameFilter 使用两种方式绑定，并在单击按钮时调用onSubmit。如下所示

<form [formGroup]="form" >
  <mat-form-field class="filter" floatLabel="never">
    <mat-label>Name</mat-label>
      <input matInput formControlName="nameFilter" [(ngModel)]="searchValue" >
  </mat-form-field> 

  <button mat-raised-button class="search" (click)="onSubmit(searchValue)">Search</button>
</form>

【讨论】：

【解决方案2】：

您可以使用按钮的 type="submit"。

<form [formGroup]="form"  (ngSubmit)="onSubmit(searchValue)">
  <mat-form-field class="filter" floatLabel="never">
    <mat-label>Name</mat-label>
      <input matInput formControlName="nameFilter" [value]="searchValue">
  </mat-form-field> 

  <button mat-raised-button class="search">Search</button>
</form>

【讨论】：