我有多个下拉菜单,如下所示。第二菜单列表取决于第一菜单,依此类推。
<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;
}
这不是选择选择类别选项,而是使菜单空白。
答案 0 :(得分: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>