angular5 - 如何重置下拉菜单并使其选择默认选项？

Question

我有多个下拉菜单，如下所示。第二个菜单的列表取决于第一个，依此类推。

 <select [(ngModel)]="firstModel" id="first"  (ngModelChange)="ChangeDropdown(this.wholeList[firstModel],'second')">
       <option value="" disabled selected>select a category</option>
       <option *ngFor="let item of first" [value]="item">{{item}}</option>
     </select>
    <br>
     <select [(ngModel)]="secondModel" id="second" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel],'third')">
       <option value="" disabled selected>select a category</option>
       <option *ngFor="let item of second" [value]="item">{{item}}</option>
     </select>
    <br>

我需要的是让我们说如果用户从第二个菜单中选择数据，那么第二个菜单之后的菜单应该选择“选择类别”选项

我试过以下代码：

 ChangeDropdown = (value,dropdownName) => {
    if(dropdownName == 'second') {
        this.secondModel = null;
        this.thirdModel = null;
        this.fourModel = null;
    }

这不是选择选择类别选项，而是使菜单空白。

标签： angular5

Answer 1

在角垫选择

在 Ts 文件中

import {Component} from '@angular/core';


@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
})
export class SelectValueBindingExample {
firstModel = '';
secondModel = '';
thirdModel = '';
  ChangeDropdown (eventInfo) {
    console.log(eventInfo)
    if(eventInfo.source._id == 'second') {
        this.secondModel = '';
        this.thirdModel = '';
    }
  }
}

在 HTML 文件中

<mat-form-field>
  <mat-select id="first"  [(ngModel)]="firstModel" (selectionChange)="ChangeDropdown($event)">
    <mat-option value="" disabled>Select categor</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>
<br/>
<mat-form-field>
  <mat-select id="second"  [(ngModel)]="secondModel" (selectionChange)="ChangeDropdown($event)">
    <mat-option value="" disabled>Select category</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>
<br/>
<mat-form-field>
  <mat-select id="third"  [(ngModel)]="thirdModel" (selectionChange)="ChangeDropdown($event)">
    <mat-option value="" disabled>Select category</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>