显示在Mat select中选择的默认选项-当mat选项值取决于父级下拉列表时

Question

我有两个mat-select，假设Dropdown-1和dropdown-2，Dropdown 2的选项取决于用户在dropdown-1中选择什么。

在这里，我想要显示当用户从dropdown 1中选择任意值时，它应该在dropdown -2 (其工作)中显示相对值，并且默认选项-2\f25 ALL -2\f6应该保持选中状态(所有选项都不应该在页面加载时显示，一旦用户单击-1\f25 dropdown-1 \f6，那么它应该只出现)。

<mat-form-field>
       <mat-select  (optionSelected)="productSelect($event.value)">
         <mat-option *ngIf="products" >All</mat-option>
          <mat-option *ngFor="let product of products" 
  [value]="product.name">
            {{ product.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>

请在这方面提供帮助。

Answer 1

将value="“添加到<mat-option>All</mat-option>，然后，当您填充"products”时，将mat-select设置为“‘”。您应该使用(ngModel)或反应式表单以一种简单的方式提供价值

查看stackblitz中的一个愚蠢的例子

  <mat-select [(ngModel)]="food" (selectionChange)="getKind()">
    <mat-option *ngFor="let f of foods" [value]="f.value">
      {{f.viewValue}}
    </mat-option>
  </mat-select>

  <mat-select [(ngModel)]="kind">
    <mat-option value="">All</mat-option>
    <mat-option *ngFor="let t of kinds" [value]="kinds">
      {{t}}
    </mat-option>
  </mat-select>

getKind()
  {
    this.kinds=[];
    switch (this.food)
    {
      case '0':
         this.kinds=['cow','pig']
         break;
      case '1':
         this.kinds=['four cheese','pinaple']
         break;
      case '2':
         this.kinds=['vegetal']

    }
    this.kind='';
  }

Answer 2

为要在第二个下拉列表中显示的选项维护一个cityOptions数组：

cityOptions = [];

然后在状态发生变化时进行设置：

stateChanged(stateName: string) {
  this.cityOptions = this.cities.filter(city => city.state === stateName);
}

您的模板应该对绑定执行以下操作：

<mat-form-field>
  <mat-label>States</mat-label>
  <mat-select (selectionChange)="stateChanged($event.value)">
    <mat-option value="" disabled>All</mat-option>
    <mat-option 
      *ngFor="let state of states" 
      [value]="state.name">
      {{ state.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

<br>

<mat-form-field>
  <mat-label>Cities</mat-label>
  <mat-select>
    <mat-option value="" disabled>All</mat-option>
    <mat-option 
      *ngFor="let city of cityOptions" 
      [value]="city.name">
      {{ city.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

这是你的推荐人的。