データがangular2のテンプレートにバインドされていません

Question

検索結果を取得しようとしていますが、コードは正しいと思われますが、データはバインドされていません。しかし、私はコンソールで結果を見ることができます。誰かが私を助けてくれる？

マイテンプレート：

 <div id="header-wrap"> 

      <div class="container clearfix"> 
       <div class="divcenter" style="max-width:990px;"> 
        <div id="primary-menu-trigger"><i class="icon-reorder"></i></div> 

        <!-- Logo 
       ============================================= --> 
        <div id="logo" style="margin-top: 5px;"> 
         <a href="#" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="assets/images/SW-Logo-Final.png" alt="Canvas Logo"></a> 


        </div> 
        <span class="inputgroupcss col-sm-5" style="padding-top:12px;"> 


            <input type="email" (keyup)=0 (keyup)='submit(button.value)' #button class="form-control required email" placeholder="Search by Name or Email" 
             style="height:38px;"> 

           <div class="col-sm-12 nopadding "> 

           <ul class="searchlist"> 
            <li *ngFor="let detail of details"> 
             <img [src]='detail.image' alt="profile_image" style="width: 35px; 
          height: 35px;"> 
             <a [routerLink]="['/demo/user',detail.profilename]">{{detail.profilename}}</a> 
            </li> 

           </ul>  
          </div> 


         </span> 


       </div> 

      </div> 

     </div> 

    </header> 

私のコンポーネント、

import {Component} from '@angular/core'; 
    import {ROUTER_DIRECTIVES,provideRouter} from '@angular/router'; 
    import {Http, Response, Headers} from '@angular/http'; 
    import {Observable} from 'rxjs/Observable'; 
    import { GetAllList } from './components/society/service'; 
    import { ISearch } from './components/search/details'; 
    import { IDetails } from './components/society/pro'; 
    import {Location} from '@angular/common'; 

    declare var System: any,jQuery:any; 
@Component({ 
    selector: 'demo-page', 
     templateUrl: './demo-page.html', 
    directives: [ROUTER_DIRECTIVES], 
     providers: [GetAllList], 
    }) 

    export class DemoPage { 
    location:Location; 
    details: ISearch[]; 
     list:IDetails[]; 
     constructor(location:Location,public http: Http,private _service:GetAllList) { 
     this.location = location; 
     // console.log(this.location.path()); 
       this._service.getList() 
      .subscribe(list => this.list = list); 
      console.log(this.list); 
    } 

     submit(id): any { 
     var headers = new Headers(); 
     headers.append('Content-Type', 'application/x-www-form-urlencoded') 
    this.http.get('http://localhost/a2server/index.php/profile/search/' + id, { headers: headers }) 
      .subscribe(response => { 
      if (response.json().error_code == 0) { 
        this.details = <ISearch[]>response.json().data; 
        // console.log(this.details); 
      } else { 
       this.details = []; 
      } 
      if (id == '') { 
       this.details = []; 
      } 

     } 

      )} 


     } 

私のコンソール、

[Object, Object, Object, Object, Object, Object, Object, Object, Object]0: Objectactive: "1"connection_status: nullcountry: "Greenland"email: "s@gmail.com"firstname: "Sachin"friends_count: "5"image: ""lastname: "Tendulkar"password: "1"phone: "2"profile_id: "1"profilename: "sachin tendulkar"relation_id: nullrepeatpassword: nullstatus: "1"street: "Perry Cross Road,Mumbai"type: nullzip: ""__proto__: Object1: Object2: Object3: Object4: Object5: Object6: Object7: Object8: Objectlength: 9__proto__: Array[0] 

Answer 1

if (id == '') { 
    this.details = []; 
} 

！

コードは問題ありません。

Answer 2

クラスのフィールドは、 "詳細" という名前が、あなたのテンプレートであなたがきています"詳細"を書いた。それはすべきではありません：

多分これが実行される

{{details.profilename}} 

Answer 3

なぜあなたのhtmlにkeyupイベントバインディングが2回あるのですか？ （keyup）= 0（keyup）= 'submit（button.value）'、最初のものを削除してください