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

为什么你的html中有两倍的keyup事件绑定？（keyup）= 0（keyup）=＆＃39;提交（button.value）＆＃39;，删除第一个

Answer 3

类字段名为“详细信息”，但在您的模板中，您编写了“详细信息”。不应该是：

{{details.profilename}}

数据未绑定到angular2中的模板

3 个答案: