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

Posted 2023-02-22

【中文标题】如何根据第一个下拉列表的选择过滤第二个下拉列表？ - 角

【英文标题】：How to filter second dropdown based on selection of first dropdown? - Angular

【发布时间】：2018-09-28 17:04:25

【问题描述】：

我有两个如下所示的下拉菜单：

所以我的计划是加载所有子类别，但我想仅在下拉列表中显示与所选类别相关的那些（包含 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>

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

谢谢大家 干杯！

【问题讨论】：

这可能会有所帮助，基本上使用change 或ngModelChange ***.com/questions/44840735/…

@Ric 我在某处想过 *ngIf="subcategory.parentId = mainCategory.Id" 但我得到一个错误：/

您可以使用change 事件获取您的类别的值，然后根据您的条件filter 获取您的subCategories 的值

根据 mainCategory 值的变化改变 subCategory。例如。 this.form.get('account_type').valueChanges.subscribe(val => )

【参考方案1】：

正如一些 cmets 所指出的，聆听您的第一个选择元素的变化，以便使用filter 为您的第二个选择动态生成选项。

类似：

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

我已经快速创建了一个working demo 来展示如何操作。

编辑

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

【讨论】：

你能解释一下吗，我认为应该在主类别上添加代码，当用户按主类别过滤子类别时，一切正常，但我不明白这是怎么回事：P谢谢

当然，我已经添加了一些 cmets :)

我什么都懂，但我不明白为什么第一个选择会触发 filterSubById 这是第二个选择的一部分，你能告诉我在第一个下拉列表中进行选择导致选择第二个的代码..

Angular 的美妙之处在于我们不必显式调用filterSubByid()。 Angular 足够聪明，可以识别出每当mainCategory 更改时都必须调用该函数，当我们从第一个下拉列表中选择一个选项时，我们实际上是在更改mainCategory

@bugs 谢谢它对我有用。您能否详细说明一下第一次下拉调用 filterSubByid() 的更改是如何起作用的？

【参考方案2】：

这是一个非常广泛的问题，有许多正确答案。 我会说最好的办法是添加 (change)="filterSubcategories()" 到您的选择元素，这将触发 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>