angulaire 4 comment l'élément de liaison 2 voies à la liste des identifiants compte tenu de toutes id: paires nom

Question

Compte tenu de la liste des ID vendorIds = [id,id,id] comme un sous-ensemble de tous les ids

et une liste de Id et les vendors=[...{id:"", name:""}...] qui a tout possible combinaisons nom identifiant

ngModel veut une liste de fournisseurs correspondant à la liste des vendorIds

Est-il possible de deux voies se lient [(ngModel)]-vendorIds de telle sorte que toute modification mise à jour directement la liste d'identification et des modifications à la liste identifiant jour directement le ngModel avec le mappage correct de [ids] à [{id:name}]

j'ai essayé .map(x=>x.id) et vendors.filter(x => vendorIds.indexOf(x.id) !== -1) en vain

Je voudrais faire cela sans variables supplémentaires pour maintenir. Il s'agit d'une solution générique permettant de combiner une liaison bidirectionnelle avec un filtre lorsqu'il se lie à la vue et une carte lorsqu'elle se lie au contrôleur/composant.

merci d'avance.

Answer 1

Vous pouvez diviser ngModel en un liant et un gestionnaire d'événements:

<any [ngModel]="vendorIds" (ngModelChange)="onVendorChange($event)"></any> 

MANIPULEZ onVendorChange par filtrage:

selectedVendors: Vendor[] = []; 

onVendorChange(idList:number[]) { 
    this.selectedVendors = idList.map(t=>vendors.find(x=>x.id == t)); 
    this.vendorIds = idList; 
} 

Dans le modèle de composant, vous pouvez lier à selectedVendors:

<ul> 
    <li *ngFor="let vendor of selectedVendors"> 
     {{ vendor.name }} 
    </li> 
</ul> 

Chaque fois que les identificateurs de fournisseur sélectionnés changent, il mettrait automatiquement à jour le selectedVendors. Tout composant lié à selectedVendors serait mis à jour automatiquement.