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 ) ); 
}

因此，您将您绑定到下拉更改事件。 然后，每次选择类别或产品类型时，我们都会过滤下拉列表可显示的数据。

您也可能必须重置下游选择。 更改类别时，请重置产品类型和子类别，因为新的顶级类别可能不允许存在旧类型和子类别值。