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

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>

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

谢谢大家干杯！

Answer 1

这是一个非常宽泛的问题，有很多正确答案。我想说最好的办法是将 (change)="filterSubcategories()" 添加到您的 select 元素，这将触发 filterSubcategories() 函数，您可以在其中 select 正确的子类别，根据您的 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>

Answer 2

正如一些评论所指出的，首先要听取您的变化 select 元素，以便为您第二个 select 动态生成带有 filter.[=19 的选项=]

类似于：

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

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

编辑

其工作方式是将来自第一个 select 的 selected 值绑定到组件的 mainCategory 属性。因此，mainCategory 会根据用户 select 从第一个菜单中选择的内容而变化。第二个 select 根据用户在第一个上的选择动态加载选项；这是通过 filter 函数实现的，该函数 returns subCategories 数组中 parentId 与选项 selected 的 id 匹配的所有元素在第一个菜单中。

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

How to filter second dropdown based on selection of first dropdown? - Angular

angular-template

angular