Question

在material2中初始化select时，没有选择默认值。如果用户选择了一个他无法取消选择的值。我想让用户取消选择该值。

我浏览了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>

Answer 1

我最终使用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的答案。

Answer 2

如果您使用的是有角度的表单，则可以始终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);
  }

祝你好运！

Answer 3

使用matSelect方法怎么样？

onChange（事件）{

const matSelect: MatSelect = event.source;
matSelect.writeValue(null);

....

Answer 4

我还有另一个我认为值得一提的解决方案：在<md-option>

上添加空reset和<md-select> click

  <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

请参阅Plunker

Answer 5

您可以选择带有重置选项：

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

来自Angular material documentation的引用。

Answer 6

将接受的答案更新为 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>

Answer 7

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

Answer 8

有点晚了，但我只是添加了一个选项作为第一个选项，以允许用户清除下拉列表

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

Answer 9

我解决了这个问题（我也正在使用表格...），将值设置为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);
}

Answer 10

这里没有任何帮助，最后我陷入了变更处理程序的深渊，我觉得这很不幸，但对我来说是必要的。

@ViewChild('matSelect') matSelect;

...

(this.matSelect.options as any)._results.forEach(opt => opt._selected = false);

Answer 11

注意“-删除-”如何没有值...选择该值时，它将取消之前的任何值

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

Answer 12

现在您可以简单地访问选项并使用“取消选择”方法。

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

Answer 13

对我来说，在 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;

如何在md中选择Angular2中取消选择所选选项

13 个答案: