Angular 5如何基於另一個下拉列表綁定下拉值

Question

我有一個從API填充的選擇下拉列表，我希望能夠根據用戶的第一選擇填充第二個選擇下拉列表，然后根據用戶的第二選擇填充第二個下拉列表。 說我有我的輸入字段

form.component.html

<div class="form-group col-sm-6">
 <label> Category</label>
 <select class="form-control" [(ngModel)]="product.productCategory" [formControl]="productForm.controls['productCategory']" require>
   <option *ngFor="let item of categorys" [value]="item.slug">{{item.name}}</option>
 </select>
</div>
<div class="form-group col-sm-6">
  <label> Product Type</label>
  <select class="form-control" [(ngModel)]="product.productType" [formControl]="productForm.controls['productType']" require>
    <option *ngFor="let item of productTypes" [value]="item.slug">{{item.name}}</option>
  </select>
</div>
<div class="form-group col-md-6">
  <label>Sub-Category</label>
    <select class="form-control" [(ngModel)]="product.subCategory" [formControl]="productForm.controls['subCategory']" require>
      <option *ngFor="let item of subs" [value]="item.slug">{{item.name}}</option>
    </select>
</div>

因為我將整個列表綁定到每個單獨的select下拉列表，但我希望subCategory僅是所選類別下的子類別，並且基於所選subCategory的productType相同。 這是我檢索類別的方式，因為它是父選擇

form.component.ts

fetchCategorys() {
this.categorySrv.fetchCategories().then((response: any) => {
  this.categorys = response;
  console.log(this.categorys);
})
  .catch(error => this.error = error)
}

我正在使用相同的方法分別獲取subCategory和productType。 如您所見，它從db帶來了每個部分中的所有項目，但是我希望能夠根據類別的選擇來綁定subCategory，並且還根據subCategory的選擇來綁定productType。 請注意， console.log(this.categorys)顯示帶有各自的subCategory和productType的類別，但是我不知道如何使綁定相對應。

Answer 1

模板

<div class="form-group col-sm-6">
 <label> Category</label>
 <select class="form-control" (change)="categoryChange($event)" [(ngModel)]="product.productCategory" [formControl]="productForm.controls['productCategory']" require>
   <option *ngFor="let item of categorys" [value]="item.slug">{{item.name}}</option>
 </select>
</div>
<div class="form-group col-sm-6">
  <label> Product Type</label>
  <select class="form-control" (change)="productTypeChanged($event)" [(ngModel)]="product.productType" [formControl]="productForm.controls['productType']" require>
    <option *ngFor="let item of productTypes" [value]="item.slug">{{item.name}}</option>
  </select>
</div>
<div class="form-group col-md-6">
  <label>Sub-Category</label>
    <select class="form-control" [(ngModel)]="product.subCategory" [formControl]="productForm.controls['subCategory']" require>
      <option *ngFor="let item of subs" [value]="item.slug">{{item.name}}</option>
    </select>
</div>

零件

public allProductTypes: ProductType[];
public allSubs: Category[];

public categoryChange( $event: Category ) {
    this.productTypes = this.allProductTypes.filter( _productType => _productType.belongsTo( $event));
}

public productTypeChanged( $event: ProductType ) {
    this.subs = this.allSubs.filter( _sub => _sub.belongsTo( $event ) ); 
}

因此，您將您綁定到下拉更改事件。 然后，每次選擇類別或產品類型時，我們都會過濾下拉列表可顯示的數據。

您也可能必須重置下游選擇。 更改類別時，請重置產品類型和子類別，因為新的頂級類別可能不允許存在舊類型和子類別值。