时间戳

首页 > 解决方案 > Angular Typscript 选择绑定选择和更改

angular - Angular Typscript 选择绑定选择和更改

问题描述

如果我需要二选实验室一选：冰饮，热饮如果我选择冰饮，二选会出现红茶，绿茶，咖啡如果我选择热饮，二选会出现牛奶，巧克力牛奶如何更改由于第一个选项的差异，可以在第二个选项中选择的项目？

现在我的代码：

<mat-form-field appearance="fill">
            <mat-label>Select Table</mat-label>
            <mat-select [(ngModel)]="selectshowedOption" (ngModelChange)="getselectedtableOption($event)" name="type">
              <mat-option *ngFor="let table of options" [value]="table.name">
                {{table.name}}
              </mat-option>
            </mat-select>
          </mat-form-field>


options = [
    { name: "ICE Drink", value: 1 },
    { name: "HOT Drink", value: 2 }
  ]

标签： angulartypescript

解决方案

如果只创建两个“秒”选择并使用，那么一种简单的方法

<mat-select *ngIf="selectshowedOption==1" [(ngModel)]="drink">
   ...
</mat-select> 
<mat-select *ngIf="selectshowedOption==2" [(ngModel)]="drink">
   ...
</mat-select>

另一种是声明一个新变量

hotDrinks=[....]
coldDrinks=[....]
secondTable:any=this.hotDrinks //a new variable

然后您迭代secondTable并在您的选择中更改“secondTable”变量

<mat-select [ngModel]="selectshowedOption" 
            (ngModelChange)="selectshowedOption=$event;
                             secondTable=$event==1?hotDrinks:coolDrinks">
...
</mat-select>

推荐阅读