如何在 md-select Angular2 中取消 select selected 选项

Question

在 material2 中，当 select 被初始化时，没有默认值被 selected。如果用户 select 是一个值，他不能取消 select 它。我想让用户取消 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 并将该值设置为未定义以获得所需的结果。

<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

我有另一个我认为值得一提的解决方案：在其 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

见Plunker

Answer 3

如果您使用 angular 表格，您可以随时 patchValue 到 '' 如下所示。

首先是 select 元素。这个例子使用的是 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 4

更新已接受的答案 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 5

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

使用matSelect的方法怎么样

<mat-select (selectionChange)="onChange($event)">

onChange(event: MatSelectChange) {
    const matSelect: MatSelect = event.source;
    matSelect.writeValue(null);
    // ...
}

Answer 7

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

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

我开发了这个解决方法（我也在使用表单，所以...），将值设置为未定义以重置 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 9

您可以有一个 select 和重置选项：

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

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

@ViewChild('matSelect') matSelect;

...

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

Answer 11

Notice how "--Remove--" does not have a value... when that is selected it will unset any value from before

<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

现在您可以简单地访问选项并使用 'deselect' 方法。

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;

Answer 14

对于任何阅读更高版本 angular 的人来说，material 文档中提供了一种简单的方法。您只需要指定一个没有值的选项，该选项基本上将您映射到的任何内容设置为 null。不幸的是，没有提供一个内置的取消按钮，这会更方便，但这也很好用。

      <mat-select>
         <mat-option>None</mat-option>
         <mat-option *ngFor="let option of options" 
         [value]="option.value">
           {{option.label}}
         </mat-option>
      </mat-select>

Link 供参考：https://material.angular.io/components/select/overview#resetting-the-select-value

如何在 md-select Angular2 中取消 select selected 选项

How to unselect selected option in md-select Angular2

angular

angular-material2