Angular 2 [（ngModel）]不起作用

Question

NET Core和Angular 2應用程序。我已經成功與Web API控制器進行通信，並可以在控制檯中記錄對象。

但是，當我嘗試在ts文件中記錄組件或使用[（ngModel）]訪問其屬性時，我不成功。

有關如何成功訪問HTML中的對象屬性的任何建議將非常感謝。這裏是我的代碼：

user.service.ts

import { Injectable } from '@angular/core'; 
    import { Observable } from 'rxjs/Rx'; 
    import { Http, Response, Headers } from '@angular/http'; 
    import { APP_CONFIG, IAppConfig } from './app.config'; 
    import { Component, Inject } from '@angular/core'; 

    @Injectable() 
    export class UserService { 

     constructor(private http: Http, @Inject(APP_CONFIG) private config: IAppConfig) { } 

//SUCCESSFULLY LOG JSON OBJECT HERE 
     public getCurrentUser =(): Observable<any> => { 
      return this.http 
       .post(this.config.apiEndpoint + "currentUser") 
       .map((response: Response) => <any>response.json()) 
       .do(x => console.log(x)); 
     } 
    } 

home.component.ts

import { Component, OnInit } from '@angular/core'; 
import { UserService } from '../../user.service'; 
import { AngUser } from '../../ang-user'; 
import { Observable } from 'rxjs/Rx'; 

@Component({ 
    selector: 'home-page', 
    templateUrl: './app/components/home/home.component.html', 
    providers: [UserService] 
}) 

export class HomeComponent implements OnInit { 
    constructor(public userService: UserServicer) { } 
    public value: any; 

    showObject(): void { 
      console.log(this.value.id); 
      console.log(this.value.userName); 
    } 

    ngOnInit(): void { 
     this.userService.getCurrentUser() 
      .subscribe(data => this.value = data, 
      error => console.log(error), 
      () => console.log('Get User complete!')); 

     this.showObject(); 
    } 



} 

home.component.html

<!-- THIS FAILS TO SHOW ANYTHING --> 
     My Values: <ul> 
      <li [(ngModel)]="value"> 
       <span>{{value.id}} {{value.userName}}</span> 
      </li> 
     </ul> 

Answer 1

取下[(ngModel)]="value"li

<li > 
    <span>{{value.id}} {{value.userName}}</span> 
</li> 

Answer 2

<!-- if u get only one object --> 
<!--this.value = [{ id: 1, name: 'pbt1' }];--> 

My Values: <ul> 
    <li> 
     <span>{{value[0].id}} {{value[0].name}}</span> 
     <input [(ngModel)]="value[0].name" /> 

    </li> 
</ul> 

<!-- if u get more than one --> 
<!--this.value = [{ id: 1, name: 'pbt1' }, { id: 2, name: 'pbt2' },{ id: 3, name: 'pbt3' }];--> 
My Values: <ul > 
    <li *ngFor="let v of value"> 
     <span>{{v.id}} {{v.name}}</span> 
     <input [(ngModel)]="v.name" /> 
    </li> 
</ul>