Mise à jour du ngFor d'Angular 2 pour un contrôle de formulaire unique

Question

J'ai un formulaire répétitif OrderLines, qui comporte deux listes déroulantes : ProductType et Product. Comme il y a plus de 1000 produits, je veux filtrer les produits dans la liste déroulante Produit après avoir sélectionné / modifié un Type de produit.

Pour cela, j'utilise un pipe productFilter, et au chargement du formulaire, cela fonctionne bien. Cependant, lorsque je change le ProductType, il semble que le ngFor ne rafraîchisse pas les valeurs disponibles.

<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>

Comment puis-je forcer le rafraîchissement des valeurs de la liste déroulante des produits sans initier le formulaire entier ?

Answer 1

Le problème semble résider dans la façon dont vous obtenez la valeur du champ "type de produit" à transmettre à la méthode d'évaluation des produits. productFilter .

Voici un Plunkr qui montre une mise en œuvre : https://plnkr.co/edit/b5FKSp06XMfQul5pYQti?p=preview

J'ai inclus deux techniques pour rafraîchir la liste des produits :

1. En recalculant la liste de produits pour chaque (change) sur le type de produit.
2. En utilisant un tuyau personnalisé comme vous l'avez fait (mon option préférée).

Comme vous pouvez le voir, mon code est assez similaire au vôtre. Voici l'essentiel :

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

La seule différence notable est la façon dont j'accède à la productType (mais votre formulaire semble plus complexe). Peut-être que ça marchera si vous pouvez corriger cette partie.

Vous pouvez voir le code pour le reste du formulaire et l'écran de l'utilisateur. productFilter dans le Plunkr.