Question

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

在这里，我想显示用户从下拉菜单1中选择任何值时，它应该在下拉列表-2（它的工作状态）中显示相对值，并且应保留ALL选项的默认选项（在加载页面时不应该显示All，一旦用户点击了dropdown-1，那么它应该只会出现）。

<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

为要在第二个下拉菜单中显示的选项维护一个@Bean数组：

@Bean
public ObjectMapper objectMapper() {
    return Jackson2ObjectMapperBuilder
            .json()
            .featuresToEnable(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES)
            .build();
}

然后在状态更改时进行设置：

cityOptions

您的模板应该对绑定执行此操作

cityOptions = [];

这是您推荐的Working Sample StackBlitz。

显示在“垫选择”中选择的默认选项-垫选项值取决于父项下拉菜单时

2 个答案: