时间戳

首页 > 解决方案 > Angular 5如何根据另一个下拉列表绑定下拉值

javascript - Angular 5如何根据另一个下拉列表绑定下拉值

问题描述

我有一个从 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>

因为我将整个列表绑定到每个单独的选择下拉列表，但我希望 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 但我不知道如何使绑定对应。

标签： javascriptangularangular5

解决方案

模板

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

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

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

推荐阅读