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

我有两个mat选择，比如dropdown-1和dropdown-2，dropdown-2的选项取决于用户在dropdown-1中选择的内容

在这里，我想显示当用户从下拉列表1中选择任何值时，它应该在下拉列表2中显示相对值。它的工作和默认选项“全部”应该保持选中状态。所有不应该显示在页面加载上，一旦用户在下拉列表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>

请对此提供帮助。

将[value]=添加到全部，然后在填充产品时，将选择的垫子与之相等。您应该使用[ngModel]或反应式表单以简单的方式提供价值

参见中的傻瓜示例

为要在第二个下拉列表中显示的选项维护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>

这是给你的裁判的一封信

---

你有一些样本数据要处理吗？很简单，你可以假设..州..城市场景..在选择州时，将填充城市，默认选择将保留城市下拉框中的所有城市。

<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>