Question

我有一个重复的OrderLines形式，有两个下拉列表;产品类型和产品。因为有1000多种产品我想在选择/更改ProductType后过滤产品下拉列表中的产品。

为此，我使用了productFilter管道，并且在表单加载时，这可以正常工作。虽然在更改ProductType时，似乎ngFor不会刷新可用值。

<div class="form-group row">
    <label for="product_type_id-field" class="col-md-4 col-form-label">
        Product Type
    </label>
    <div class="col-md-8">
        <select formControlName="product_type_id" class="form-control" id="product_type_id-field">
            <option *ngFor="let productType of productTypes" value="{{productType.id}}">{{productType.name}}</option>
        </select>
    </div>
</div>

<div class="form-group row">
    <label for="product_id-field" class="col-md-4 col-form-label">
        Product
    </label>
    <div class="col-md-8">
        <select formControlName="product_id" class="form-control" id="product_id-field">
            <option *ngFor="let product of products | productFilter: myForm.controls.orderlines.controls[i].controls.product_type_id.value" value="{{product.id}}">{{product.name}}</option>
        </select>
    </div>
</div>

如何在不启动整个表单的情况下强制刷新“产品”下拉值？

Answer 1

问题似乎是你获得＆＃34;产品类型的价值＆＃34;要传递到productFilter的字段。

这是一个显示实施的Plunkr：https://plnkr.co/edit/b5FKSp06XMfQul5pYQti?p=preview

我提供了两种刷新产品列表的技术：

重新计算产品类型上每个(change)事件的产品列表。
使用自己喜欢的自定义管道（我的首选选项）。

正如您所看到的，我的代码与您的代码非常相似。这是重点：

<select formControlName="product2">
  <option>Pick a product...</option>
  <option *ngFor="let p of allProducts|productFilter:productForm.get('productType').value">{{p.name}}</option>
</select>

唯一值得注意的是我如何访问productType值（但您的表单似乎更复杂）。如果你能解决这个问题，也许它会起作用。

您可以看到表单其余部分的代码以及Plunkr中的productFilter。

Angular 2更新ngFor用于一个表单控件

1 个答案: