Généraliser les valeurs de liaison avec ngModel

Question

J'apprends juste Angular 2 et un problème que je n'ai pas réussi à résoudre est la création de formulaires avec ngModel sans spécifier de manière statique le nom de l'attribut auquel je suis lié. Je ne suis pas sûr des mécanismes pour surmonter ce problème (même si je suis sûr que c'est assez commun) ou comment il est fait référence au sein de la communauté.

Mon modèle affiche les clés et les valeurs mais ne reflète pas les mises à jour enregistrées. Il semble que se référer à l'attribut d'une manière dynamique provoque la perte de la liaison. (Est-il évaluer l'attribut lié avant le raccordement des données?)

est ici où je suis coincé:

Modèle:

<table class="table table-responsive"> 
    <tr *ngFor="let prop of account | keyValues"> 
    <td>{{ prop.key }}</td> 

    // Problem here: 
    // if I have [(ngModel)]="prop.key", it only displays the keys 
    // if I sub in a static attribute e.g. [(ngModel)]="account.accountName" it works 
    <td><input name="{{prop.key}}" [(ngModel)]="prop.value" /></td> 
    </tr> 
</table> 

Tuyau:

@Pipe({ 
    name: 'keyValues' 
}) 
@Injectable() 
export class KeysPipe implements PipeTransform { 
    transform(value, args:string[]) : any { 
    let keys = []; 
    for (let key in value) { 
     keys.push({key: key, value: value[key]}); 
    } 
    return keys; 
    } 
} 

Composant:

... boiler plate ... 

    save(): void { 
    this.accountsService.update(this.account) 
     .then(() => this.goBack()); 
    } 

    ... 

Answer 1

La réponse est d'utiliser Angular Dynamic Forms

Vous pouvez également tirer parti de certaines librairies comme PrimeNG's Datatable éditable de PrimeFaces, que je recommande fortement!