在 material2 中，当一个选择被初始化时，没有选择默认值。如果用户选择了一个值，他不能取消选择它。我想让用户取消选择该值。
我通过了help already available，但无法使用它。
<mat-select id="formal" formControlName="formal" placeholder="Default - No value selected">
<mat-option value="1">formal</mat-option>
<mat-option value="2">informal</mat-option>
</mat-select>
【问题讨论】：
对于阅读本文以获取更高版本的 Angular 的任何人，材料文档中提供了一种简单的方法。您只需要指定一个没有值的选项，该值基本上将您映射到的任何内容设置为空。不幸的是，没有提供更方便的内置取消按钮，但这也很好用。
<mat-select>
<mat-option>None</mat-option>
<mat-option *ngFor="let option of options"
[value]="option.value">
{{option.label}}
</mat-option>
</mat-select>
参考链接：https://material.angular.io/components/select/overview#resetting-the-select-value
【讨论】：
对我来说，在 mat-select 中以这种方式工作：
在 HTML 中：
<mat-form-field class="input-withd-columns-total">
<mat-label>Ação</mat-label>
<mat-select #action1>
<mat-option>{{ viewValue }}</mat-option>
</mat-select>
</mat-form-field>
在 TS 中：
@ViewChild("action1") action1: MatSelect;
this.action1.value = null;
【讨论】：
现在您可以简单地访问选项并使用“取消选择”方法。
HTML：
<mat-select #select multiple>
<mat-option *ngFor="let neighborhood of neighborhoods" [value]="neighborhood">
{{neighborhood.name}}
</mat-option>
</mat-select>
Ts：
@ViewChild('select') select: MatSelect;
deselect(value){
this.select.options.find(option => option.value === value)?.deselect();
}
【讨论】：
使用 matSelect 方法怎么样。
<mat-select (selectionChange)="onChange($event)">
onChange(event: MatSelectChange) {
const matSelect: MatSelect = event.source;
matSelect.writeValue(null);
// ...
}
【讨论】：
value。因此，在更新 options 时将选择该值。我做了一个简单的event.source.value = null，到目前为止看起来还不错。
注意“--Remove--”没有值...当它被选中时，它将取消之前的任何值
<mat-form-field appearance="fill">
<mat-label>{{facet._id}}<span class="red bold" *ngIf="facet.active">*</span></mat-label>
<mat-select [ngModel]="facet.active" (selectionChange)="filter.emit([{filter: facet._id, option: $event.source.value}, false])" name="Sort">
<mat-option>-- Remove --</mat-option>
<mat-option *ngFor="let item of facet.option" [value]="item.value">
{{item.value}}
<span>({{item.count}})</span>
</mat-option>
</mat-select>
</mat-form-field>
【讨论】：
这里没有什么对我有用，最后在更改处理程序中陷入了一个我觉得很不幸的深度破解，但对我来说，这是必要的。
@ViewChild('matSelect') matSelect;
...
(this.matSelect.options as any)._results.forEach(opt => opt._selected = false);
【讨论】：
您可以选择带重置选项：
<mat-form-field>
<mat-label>State</mat-label>
<mat-select>
<mat-option>None</mat-option>
<mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
</mat-select>
</mat-form-field>
【讨论】：
我开发了这项工作（我也在使用表单......），将值设置为 undefined 以重置 mat-select。
HTML
<mat-form-field>
<mat-label>Add roles</mat-label>
<mat-select formControlName="rolesFormCtrlStepper3" (selectionChange)="createRole($event.value)">
<mat-option *ngFor="let roleComboBox of rolesComboBox" [value]="roleComboBox">
{{roleComboBox}}
</mat-option>
</mat-select>
</mat-form-field>
TS
createRole(r) {
...
...
this.formArray.get([2]).get('rolesFormCtrlStepper3').setValue(undefined);
}
【讨论】：
有点晚了，但我只是添加了一个选项作为第一个选项，以允许用户清除下拉列表
<mat-form-field>
<mat-select placeholder="Parent Organisation" [formControl]="form.controls['parentOrganisationId']">
<mat-option *ngIf="form.controls['parentOrganisationId'].value" [value]="null">Clear</mat-option>
<mat-option *ngFor="let option of organisations$ | async" [value]="option.id">
{{ option.description }}
</mat-option>
</mat-select>
</mat-form-field>
【讨论】：
<mat-form-field appearance="outline">
<mat-label>Deal</mat-label>
<mat-select>
<mat-option>None</mat-option>
<mat-option *ngFor="let object of somelist" [value]="object">{{object.property}}</mat-option>
</mat-select>
</mat-form-field>
【讨论】：
将接受的答案更新到 Angular 6：
<mat-form-field>
<mat-select id="formal" [(value)]="selectedValue" placeholder="Default - No value selected">
<mat-option value="1">formal</mat-option>
<mat-option value="2">informal</mat-option>
</mat-select>
</mat-form-field>
<div (click)="selectedValue = null">click me to clear md select</div>
【讨论】：
如果您使用的是角形，您始终可以patchValue 到''，如下所示。
首先，选择元素。此示例使用 Ionic，但与 Angular 相同。
<ion-select formControlName="formal" item-start>
<ion-option *ngFor="let option of input.options" value="{{option}}">{{option}}</ion-option>
</ion-select>
<ion-icon color="danger" name="close" (click)="unselect('formal')" item-end></ion-icon>
其中form 是FormGroup。
form: FormGroup;
unselect 方法会修补一个空值。
unselect(id: string): void {
let reset = {};
reset[id] = ''
this.form.patchValue(reset);
}
最好的问候！
【讨论】：
我有另一个我认为值得一提的解决方案：在其click 上添加一个空的<md-option> 和reset <md-select>
<md-select id="formal" formControlName="formal" placeholder="Default - No value selected">
<md-option (click)="form.controls.formal.reset()"></md-option>
<md-option value="1">formal</md-option>
<md-option value="2">informal</md-option>
</md-select>
这样您的Component 中不需要任何自定义代码，也不需要使用ngModel
【讨论】：
select 中，您也没有此选项...您需要创建一个空的 option 或 '-- select something --' option “默认状态”。这种方式对 UI 更好，因为用户可以选择不选择任何内容而不是单击按钮，但我不知道您的用户案例。 ;-)
我最终使用 ngModel 并将该值设置为 undefined 以获得所需的结果。
<md-select id="formal" [(ngModel)]="selectedValue" formControlName="formal" placeholder="Default - No value selected">
<md-option value="1">formal</md-option>
<md-option value="2">informal</md-option>
</md-select>
<div (click)="unselect()">click me to clear md select</div>
在组件中
unselect(): void {
this.selectedValue = undefined;
}
plunkr 的答案。
【讨论】：