数据未绑定到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中的模板

回答

相关问题