Угловое обновление 2 ngFor для управления одной формой

Question

У меня есть повторяющаяся форма OrderLines, у которой есть два выпадающих меню; ProductType и продукт. Поскольку есть более 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> 

Как я могу заставить обновить выпадающие значения Product без инициирования всей формы?

Answer 1

Проблема заключается в том, что вы получаете значение поля «тип продукта», чтобы перейти к productFilter.

Вот Plunkr, который показывает реализацию: https://plnkr.co/edit/b5FKSp06XMfQul5pYQti?p=preview

Я включал два метода для обновления списка продукции:

1. По перерасчету списка продуктов для каждого (change) события по типу продукта.
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.