nlr_p nlr_p - 1 year ago 79
TypeScript Question

Data is not bound to templates in angular2

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>

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

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







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;
selector: 'demo-page',
templateUrl: './demo-page.html',
directives: [ROUTER_DIRECTIVES],
providers: [GetAllList],

export class DemoPage {
details: ISearch[];
constructor(location:Location,public http: Http,private _service:GetAllList) {
this.location = location;
// console.log(this.location.path());
.subscribe(list => this.list = 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: ""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 Source
if (id == '') {
    this.details = [];

maybe this is executed?!

Code seems fine.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download