通过单击按钮重置垫选择值

Question

我有一个用于过滤 UI 上数据的垫选择下拉列表。我使用 getTeam 函数将数据从子组件发送到父组件

垫子选择

<mat-form-field>
  <mat-label>Select Team</mat-label>
  <mat-select (selectionChange)="getTeam($event)">
    <mat-option *ngFor="let team of teams" [value]="team.name">
      {{team.name}}
    </mat-option>
  </mat-select>
</mat-form-field>
<span class="material-icons" (click)="reset()">delete_sweep</span>

过滤器逻辑 (.ts) getTeamQuery 接收发出的值并过滤 UI 数据。

  videos: Video[] = videos;
  filteredVideos: Video[] = videos;

    getTeamQuery(queryEmitted: string) {
    this.videos = this.filteredVideos.filter(video => {
      return video.team === queryEmitted;
    });
  }


  **Clearing the filter selection**

  reset() {
    this.videos = videos;
  }

如何通过单击材质图标来重置垫选择的选择并返回到初始状态？初始状态，表示mat-select值为占位符的状态。

Answer 1

只需在循环之前添加一个普通的 mat-option 即可，如下所示：

<mat-select (selectionChange)="getTeam($event)">
    <mat-option value="">Select a name...</mat-option>

    <mat-option *ngFor="let team of teams" [value]="team.name">
      {{team.name}}
    </mat-option>

  </mat-select>

编辑：根据您的评论，您可以在这种情况下使用 ngModel，如下所示：

html 文件：

<mat-select (selectionChange)="getTeam($event)" [(ngModel)]="teamInitial">
  // your code...
</mat-select>

.ts 文件：

export class YourComponent {
   teamInitial = '';

   // you code...

   reset() {
     this.teamInitial = '';
   }
}