la liaison bidirectionnelle tableaux angulaire 2

Je suis conscient de base 2-voie de liaison angulaire 2 comme indiqué dans les docs.

J'ai un tableau de persons, que j'ai de l'aide pour construire une liste html:

Maintenant, quand je clique sur une personne en ligne, je peux le modifier à l'aide de 2 voies de liaison:

 <form>
    <label>Name: </label>
    <input [(ngModel)]="selectedPerson.name" name="name"/>

    <label>Description: </label>
    <input [(ngModel)]="selectedPerson.job" name="job"/>
</form>

Maintenant, ce que je veux, c'est 2-de manière à lier la liste elle-même: (La liste est dans une vue différente de la ligne de l'éditeur)

 <div class='row' *ngFor="let person of model">
    <div class='col'>{{person.name}}</div>
    <div class='col'>{{person.job}}</div>
 </div>

Actuellement, je suis en utilisant *ngFor à la liste de toutes les personnes. Si mon model est un tableau de deux personnes, je reçois deux lignes. Il ya des cas où le model peut changer pour avoir 3 ou 4 personnes. Est-il possible que je peux faire angulaire détecter et ajouter des lignes en conséquence? [(ngModel)] ne semble pas s'appliquer ici.

Fondamentalement, je veux que ma liste vue de mettre à jour sans avoir à rafraîchir la page. Comment puis-je faire la model utilisé dans ngFor écouter changements?

Êtes-vous essayer de partager vos model avec un autre composant ou est la "liste" dans le même composant définition de votre ligne de l'éditeur?

OriginalL'auteur Snowman | 2016-10-03

  1. 3

    Ici est un plunker d'un exemple de comment vous pouvez lier votre model variable à un autre composant:

    https://plnkr.co/edit/tM20HcUIx13ZUPh0faTB?p=preview

    J'ai créé un simple composant de liste à partir de votre code ci-dessus:

    import { Component, Input  } from '@angular/core';

import { Person } from './person';

@Component({
  selector: 'my-list',
  template:`
    <h3>The List</h3>
    <tr class='row' *ngFor="let person of model">
      <td class='col'>{{person.name}}</td>
      <td class='col'>{{person.job}}</td>
    </tr>
})

export class List {
  @Input() model:Array<Person>;  
}

    La Input décorateur permet au composant de savoir à quoi s'attendre et d'entrée de ce type et de les utiliser dans le cadre de cette composante.

    Dans le modèle de composant de l'éditeur, j'ai utilisé le my-list directive et de définir le modèle d'entrée de la directive du modèle dans l'éditeur de composant.

    <my-list [model]="model" ></my-list>

    Cela permet de maintenant, de toute modification du modèle d'être réfléchi, il int enfant composant de liste.

    Si vous voulais vous informer d'un composant qui n'était pas un enfant de l'éditeur de composant, vous devez utiliser le @Output décorateur et mettre en place un EventEmitter qu'un auditeur peut être lié à et puis utilisées pour mettre à jour la liste d'ailleurs.

    Prendre un coup d'oeil à la documentation ici:

    https://angular.io/docs/ts/latest/cookbook/component-communication.html

    Merci de répondre. Je vais l'essayer et de vous en informer. +1
    Merci copain. Cet exemple plnkr.co/modifier/tM20HcUIx13ZUPh0faTB?p=preview m'aider.

    OriginalL'auteur David Blaney

  2. 2

    Grâce à @David Blaney.
    Je ne suis pas sûr si je peux le poster.
    Je ne voulais prolonger votre exemple de grille d'édition /éditer la table avec les deux sens de la liaison tableau directement sur chaque ligne de la table - angulaire est de prendre soin de la mise à jour de la Matrice en tant qu'utilisateur est écrit dans la "élément d'entrée directement dans la table". L'utilisateur peut modifier rapidement les éléments sans d'abord de sélectionner la ligne dans la table. Dans l'exemple original de @David Blaney dans le plunker je viens de remplacer l'ensemble de la table élément app/éditeur.composante.ts:

    <form id="bigForm">
  <table>
    <tr class='row'>
        <th class='col'>Name</th>
        <th class='col'>Job</th>
    </tr>
    <tr class='row' *ngFor="let person of model; let i = index" (click)="selectPerson(person)" >
      <td class='col'>
        <input [id]="'person.name' + i" [(ngModel)]="person.name" [name]="'person.name' + i"/>
        - {{person.name}}
      </td>
      <td class='col'>{{person.job}}</td>
    </tr>
  </table>
</form>

    Alors je peux poster plusieurs lignes qui ont été modifiées sur le serveur http dans une seule requête.

    Merci de répondre. +1. Je vais l'essayer quand je peux.

    OriginalL'auteur vlakov

  3. 1

    Vous ne voulez pas faire quelque chose à regarder sur la matrice de changement. Angulaire prend soin.

    Voici l'exemple de votre problème. ngFor exemple

    Merci de répondre. Je vais l'essayer et de vous en informer. +1.

    OriginalL'auteur Thaadikkaaran