如何根据第一个下拉列表的选择过滤第二个下拉列表？ - 角度

Question

我有两个下拉列表，如下所示：

所以我的计划是加载所有子类别，但我想在下拉列表中仅显示与所选类别相关的那些（包含ParentId作为所选类别的Id的那个）。

这是我的代码：

<!--Category-->

<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">Category:</label>
  <div class="col-xs-9">
    <select class="form-control select2" style="width: 100%;"
            data-minimum-results-for-search="Infinity" name="articleCategory" #articleCategory="ngModel" required [(ngModel)]="article.mainCategory">
      <option disabled [ngValue]="null">-/-</option>
      <option [ngValue]="category" *ngFor="let category of mainGroups">{{category.title}}</option>
    </select>
  </div>
</div>

<!--Subcategory-->

<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">Sub category:</label>
  <div class="col-xs-9">
    <select class="form-control select2" style="width: 100%;" name="subCategory" #subCategory="ngModel" required [(ngModel)]="article.subCategory">
      <option disabled [ngValue]="null">-/-</option>
      <option [ngValue]="subcategory" *ngFor="let subcategory of subCategories">{{subcategory.title}}</option>
    </select>
  </div>
</div>

如果我需要发布打字稿代码，请告诉我，但这里我从数据库中获取了值，这对我来说只是一个问题，如何根据类别选择过滤子类别。

谢谢你们 干杯！

Answer 1

正如一些评论所指出的那样，先听一下你所做的改变选择元素动态生成选项，然后用filter进行第二次选择。

类似的东西：

filterSubById(id) {
    return this.subCategories.filter(item => item.parentId === id);
}

我已经快速working demo来展示如何。

修改

这种方式的工作方式是第一个选择中的选定值绑定到组件的mainCategory属性。因此，mainCategory会根据用户从第一个菜单中选择的内容而更改。第二个选择根据用户在第一个选择的内容动态加载选项;这是通过filter函数完成的，该函数返回subCategories数组中parentId与第一个菜单中所选选项的id匹配的所有元素。

Answer 2

这是一个非常广泛的问题，有许多正确的答案。 我想说最好的办法是添加（更改）=＆＃34; filterSubcategories（）＆＃34;到你的select元素，它将触发filterSubcategories（）函数，你可以根据你的article.mainCategory选择正确的子类别。

 <!--Category-->

<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">Category:</label>
  <div class="col-xs-9">
    <select class="form-control select2" style="width: 100%;"
            data-minimum-results-for-search="Infinity" (change)="filterSubcategories()" name="articleCategory" #articleCategory="ngModel" required [(ngModel)]="article.mainCategory">
      <option disabled [ngValue]="null">-/-</option>
      <option [ngValue]="category" *ngFor="let category of mainGroups">{{category.title}}</option>
    </select>
  </div>
</div>