第一个下拉选择不过滤第二个下拉答案

【问题标题】：First dropdown selection is not filtering second dropdown第一个下拉选择不过滤第二个下拉
【发布时间】：2018-09-29 23:33:42
【问题描述】：

我正在尝试根据第一个下拉列表的选择来过滤下拉列表，在我的控制台日志中，一切都很好，但第二个下拉列表总是显示所有结果，而不是过滤一个，这是我的做法：

<!--Group-->
<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">GROUP:</label>
  <div class="col-xs-9">
    <select class="form-control" style="width: 100%;"
            data-minimum-results-for-search="Infinity" name="articleGroups" required (change)="filterSubById(article.mainGroup.id)" [(ngModel)]="article.mainGroup">
      <option disabled [ngValue]="null">-/-</option>
      <option [ngValue]="group" *ngFor="let group of mainGroups">{{group.title}}</option>
    </select>
  </div> 
</div>

<!--Subgroup-->
<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">SUBGROUP:</label>
  <div class="col-xs-9">
    <select class="form-control" style="width: 100%;" name="subGroup" required [(ngModel)]="article.subGroup">
      <option disabled [ngValue]="null">-/-</option>
      <option [ngValue]="subgroup" *ngFor="let subgroup of subGroups">{{subgroup.title}}</option>
    </select>
  </div>
</div>

【问题讨论】：

标签： javascript angular angular-template

【解决方案1】：

您需要将filterBySubId 方法的结果传递回视图。你没有对返回的值做任何事情。

我会这样做：

filterSubById(Id) {
    this.filteredSubGroups = this.subGroups.filter(item => item.parentId == Id);
}

在视野中

<option [ngValue]="subgroup"
        *ngFor="let subgroup of filteredSubGroups">{{subgroup.title}}</option>

【讨论】：

好吧，我在我的帖子里说过return this.subGroups.filter(item => item.parentId == Id); 不一样吗？
嗯？你怎么看？
@billy_56，过滤器不会修改原始数组，因此您应该保留一个过滤子组数组，其中包含当前过滤的子组和您应用过滤的原始子组数组
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
正如@user700284 所说。过滤器没有修改数组，所以模板中的subGroups 还是一样的。 return 确实返回过滤后的值。但是该值不在任何地方使用。您需要写(change)="subGroups = filterSubById(article.mainGroup.id)"，这不是一个好习惯。