我有一个mat-select下拉列表,用于过滤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;
}
如何通过单击材质图标来重置对垫选择的选择并返回到初始状态?初始状态,表示垫选择值是占位符的状态。
答案 0 :(得分: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 = '';
}
}