數據未綁定到angular2中的模板

我試圖在搜索中獲得結果，我認爲代碼是正確的，但數據沒有綁定。但是我可以在控制檯中看到結果。有人可以幫我嗎？數據未綁定到angular2中的模板

我的模板：

 <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: "[email protected]"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]

來源

2016-08-17 MMR

請在控制檯上顯示打印輸出。它真的是一個數組嗎？或者也許id是每次都清空並且清單立即被清除？！代碼看起來不錯。 – mxii

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

也許這是執行？

代碼似乎很好。

來源

2016-08-17 09:34:16 mxii

是@ mxii，你絕對正確，但你能告訴我如何得到解決方案....我無法發送我搜索到的價值我的ts ..... – MMR

我不能看到控制檯 – MMR

的價值，我不知道，你的doint方式是正確的。看看這個plunker：https://plnkr.co/edit/8CaPrjxb7g6KC9tKDkck?p=preview – mxii

類字段被命名爲「細節」，但在你的模板中，您已經寫下「細節」。它不應該是：

{{details.profilename}}

來源

2016-08-17 09:08:11 phip1611

我在詳細細節 – MMR

爲什麼你有兩次keyup事件綁定在你的html？（keyup）= 0（keyup）='submit（button.value）'，刪除第一個

來源

2016-08-17 10:01:44 lanlau

stil沒有用...........問題是我沒有得到seached關鍵字我ts – MMR

數據未綁定到angular2中的模板

回答

相關問題