如何清除Angular中组合框选择的值

时间:2019-01-27 18:57:14

标签: javascript html angular typescript

我有一个简单的HTML文件,其中包含1个组合框和1个清除按钮。我怎样才能使该清除按钮单击时清除组合框选择的值。这是我的代码:

mat-card-content fxLayout="row wrap" fxLayoutAlign="left" fxLayoutGap="30px">

          <mat-form-field fxFlex="30%">
            <mat-select placeholder="Choose Employer"
                        [(ngModel)]="customModel"
                        #activeEmployers="ngModel"
                        required>
              <mat-option *ngFor="let emp of employerList" [value]="emp.displayName">{{emp.displayName}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </mat-card-content>
        <mat-card-actions>
          <button type="button" class="get-button" (click)="getEmployers()">
            CLEAR
          </button>
        </mat-card-actions>
      </mat-card>

但是在这里,如果我使用

<button type="button" class="get-button" (click)="onClearSelected()">
                CLEAR
              </button>

并在ts文件中

onclear(){this.employerList=null}

然后清除组合框的所有选项。我如何才能达到唯一选定的值并将其清除?

1 个答案:

答案 0 :(得分:2)

您需要清除[(ngModel)]的值。使用以下命令更改onclear功能

onclear(){this.customModel=null}

将ployerList设置为undefined会清除您选择的选项。