Question

我有两个下拉菜单。仅当用户选择了第一个下拉菜单时，我才想启用第二个下拉菜单。（角度版本：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'}
  ];
}

Answer 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

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

1 个答案: