单击后的角度搜索功能

Question

单击后，我试图过滤表中的对象。

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>

TS

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
          }
    })

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

Answer 1

您可以对nameFilter使用 2 路绑定，并在单击按钮时调用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>

Answer 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>