Bilateral binding arrays in angular 2

Question

I am aware of basic two-way binding in angular 2, as shown in the docs.

I have an persons array that I use to create an html list:

Now, when I click on a person’s line, I can edit it using two-way binding:

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

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

Now I want the 2-way link the list itself: (The list is in a different view than the line editor)

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

I am currently using *ngForto list all individuals. If mine modelis an array of two people, I get two rows. There are times when it modelcan change by 3 or 4 people. Is there any way to make angular detect this and add lines accordingly? [(ngModel)]doesn't seem to be applicable here.

, , . model ngFor ?

Answer 1

, model :

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

:

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

Input , , .

my-list .

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

int he child list component.

, , , @Output EventEmitter, , .

:

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

Answer 2

, . Angular .

. ngFor

Answer 3

@David Blaney. , . / . angular , " " ". . @David Blaney plunker table app/editor.component.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>

http- .