根据第一个下拉菜单角度禁用第二个下拉菜单答案

【问题标题】：Disabling the second dropdown based on first dropdown angular根据第一个下拉菜单角度禁用第二个下拉菜单
【发布时间】：2019-02-14 05:30:26
【问题描述】：

我有两个下拉菜单。我想启用第二个下拉菜单，前提是用户选择了第一个下拉菜单。（角度版本：6） HTML 代码：

<mat-form-field>   
    <mat-select placeholder="Favorite food" >     
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}     
        </mat-option>   
    </mat-select> 
</mat-form-field> 
<mat-form-field>   
    <mat-select placeholder="Favorite Drink" [disabled]="disableSelect.value">
        <mat-option *ngFor="let drink of drinks" [value]="drink.value">
          {{drink.viewValue}}
        </mat-option>   
    </mat-select> 
</mat-form-field>

TS 代码：

export class DropdownexampleComponent implements OnInit {

  disableSelect = new FormControl(true); 
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  drinks: Drink[] = [
    {value: 'drink-0', viewValue: 'Coke'},
    {value: 'drink-1', viewValue: 'Sprite'},
    {value: 'drink-2', viewValue: 'Fanta'}
  ];
}

【问题讨论】：

标签： angular

【解决方案1】：

您可以在第二个选择框的[disabled] 中检查第一个选择框的值。您尚未将第一个选择框的值绑定到任何变量。

试试这样的：

<select id="power" required [(ngModel)]="powerVal">
    <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
</select>
<select id="morepower" required [disabled]="powerVal==''">
    <option *ngFor="let mpow of morePowers" [value]="mpow">{{mpow}}</option>
</select>

工作演示：https://stackblitz.com/edit/angular-vcfmfn

【讨论】：