Angular 2 [(ngModel)] Funktioniert nicht

Question

NET Core und Angular 2-Anwendung. Ich habe erfolgreich mit einem Web-API-Controller kommuniziert und kann das Objekt in der Konsole protokollieren.

Wenn ich jedoch versuche, die Komponente in der ts-Datei zu protokollieren oder auf seine Eigenschaften mit dem [(ngModel)] zuzugreifen, bin ich nicht erfolgreich.

Jeder Hinweis, wie man erfolgreich auf die Objekteigenschaften im HTML zugreifen kann, wäre großartig, danke. Hier ist mein Code:

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

entfernen [(ngModel)]="value" aus 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>