如果清除字段，mat-select 会突出显示先前的值

Question

有一个 mat-select 元素

<mat-form-field id="statusField">
     <mat-select disableOptionCentering placeholder="Status" formControlName="statusField">
         <mat-option *ngFor="let status of allTaskStatuses; trackBy: trackByFn" [value]="status">
               {{ status.name }}
         </mat-option>
     </mat-select>
</mat-form-field>

还有一个按钮可以清除字段

clearField(event: MouseEvent, fieldName: string): void {
        event.stopPropagation();
        this.filterFormGroup.get(fieldName).reset();
}

在我选择任何选项并单击重置按钮后，该字段变为空，但在下拉列表中仍突出显示先前的选择。

我试过 .setValue(null) 而不是 .reset()，但没有任何区别。

如果在点击按钮后执行 console.log(this.fieldFormGroup.get('statusField'))，我会看到 value: null 属性。

Answer 1

不确定这是否能回答您的问题，但您为什么不简单地将您的选择设置为 ''？

我非常快速地尝试了我发现的 Stackblitz：link。我添加了一个“清除”按钮，它会删除文本和之前的选择……这是您要找的吗？