Как реализовать двустороннюю привязку с угловым2

Question

Я совершенно не знаком с угловым 2, я пытаюсь связать данные из списка с полем ввода, у меня есть div и внутри div у меня есть ul и один поле ввода, то, что я пытаюсь сделать, - это вставить связывать вход с данными, когда я нажимаю на каждое указанное имя, также хочу иметь только два поля ввода (не два поля для каждого указанного имени, как оно есть сейчас)

this is how it looks like

import { Component } from '@angular/core'; 
      import {MainService} from './main.service' 

      @Component({ 
       selector: 'my-app', 
       template:` 
       <div *ngFor="let user of data" (click)="message(user.name, user.number)"> 
        <ul> 
         <li>{{user.name}}</li> 
        </ul> 

        Name: <input type="text" [(ngModel)]="user.name"><br><br> 
        number: <input type="text" [(ngModel)]="user.number"> 
       </div> 

       `, 
       providers: [MainService] 
      }) 
      export class AppComponent { 
       data: any[]; 
       constructor(private mainservice: MainService){ 

       } 
       ngOnInit(){ 
        console.log("Test") 
        this.getUsers() 
       } 
       getUsers(){ 

        this.mainservice.getUsers().subscribe(
         data => { 
          console.log(data) 
          this.data = data; 
          }, 
         error => { 
          console.log(error) 

         } 
         ) 
       } 
       message(name, num){ 
        console.log(name + " " + num) 
       } 

      } 

Answer 1

Вот рабочий пример. Я думаю, вы просто ошиблись в своем HTML.

@Component({ 
    selector: 'my-app', 
    template:` 
    <div *ngFor="let user of data" (click)="EditUser(user)"> 
     <ul> 
      <li>{{user.name}}</li> 
     </ul> 
    </div> 
    Name: <input type="text" [(ngModel)]="model.name"> 
    <br /> <br /> 
    Number: <input type="text" [(ngModel)]="model.num"> 
    `, 
    providers: [HTTP_PROVIDERS, MainService] 
}) 

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