角度2の更新ngForフォームコントロールの1つ

Question

私は2つのドロップダウンを持っている、繰り返しフォームOrderLinesを持っています。商品タイプと商品。 1000以上の製品があるので、ProductTypeを選択/変更した後に、ProductドロップダウンでProductsをフィルタリングしたいと思います。

これは、私は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

productFilterに渡す "製品タイプ"フィールドの値を取得する方法が問題です。

はここで実装を示しているPlunkrです：製品の種類ごとに(change)イベントのための製品リストを再計算することにより

1. ：https://plnkr.co/edit/b5FKSp06XMfQul5pYQti?p=preview

   私は、製品のリストをリフレッシュするための二つの技術が含まれていました。

2. 私の好みのオプションのようなカスタムパイプを使用しています。

ご覧のとおり、私のコードはあなたのものとかなり似ています。ここでのハイライトです：

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

のみ顕著な違いは、私はproductType値にアクセスする方法である（ただし、フォームは、より複雑なようです）。おそらく、あなたがそのビットを修正することができればうまくいくでしょう。

残りのフォームのコードとproductFilterがPlunkrに表示されます。