Data is not bound to templates in angular2

Question

I am trying to get the results on search,I think the code is correct but the data is not bound. Yet I can see the results in the console.Can someone please help me?

My Template:

        <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>

My Component,

    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 = [];
            }

        }

             )}


      }

my console,

[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 = [];
}

maybe this is executed?!

Code seems fine.

Answer 2

why do you have twice the keyup event binding in your html? (keyup)=0 (keyup)='submit(button.value)', remove the first one

Answer 3

The class field is named "details" but in your template you've written "detail". Shouldn't it be:

{{details.profilename}}