nlr_p nlr_p - 3 months ago 16
TypeScript Question

NgFor only supports binding to Iterables such as Arrays

When i have data in my db ,the templtae displays it but when i dont have data,it shows the following error,
---------NgFor only supports binding to Iterables such as Arrays.------

My template

<p *ngIf="show">You dont have any requests</p>
<div class="col-sm-12 formpaddingcss">
<h3 class="headingfontcss">Requests</h3>
</div>
<div class="col-sm-12 requests formpaddingcss">
<div *ngFor="let detail of details" class = "col-sm-12">
<div class="col-sm-12 nopadding">
<div class="societysize col-xs-12">
<div class="col-sm-2 col-xs-3 nopadding">
<img class="imageheight" [src]='detail.image' alt="profile_image">
</div>
<div class="col-sm-6 col-xs-6 nopadding">
<div class="col-sm-12 nopadding">
<h6 class="headingh6 nobottommargin"><a [routerLink]="['/demo/user',detail.firstname]"> {{detail.firstname}} </a></h6>
</div>
<div class="col-sm-12 nopadding">
<span class="spanaddress"><i class="icon-map-marker"></i>&nbsp;{{detail.street}}</span>
<span class="spanaddress">,&nbsp;{{detail.city}}</span>

</div>
</div>
<div class="col-sm-4 col-xs-3 center">
<div class="userimage col-xs-12">
<img src="assets/images/users.png">&nbsp;<b class="countcss">{{detail.friends_count}}</b>
</div>

<a class="button buttonaquacss button-mini button-aqua" (click)='confirmreq(button,detail.profile_id)' #button [style.background]="color"><span><i class="icon-plus-sign"></i>Confirm</span></a>


</div>
</div>
</div>


My Ts,

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { IDetails } from './details';

@Injectable()
export class GetAllList {
str = localStorage.getItem('social');
loc = JSON.parse(this.str);
id = this.loc.profile_id;
private _productUrl = 'http://localhost/a2server/index.php/requests/getreqdetails/' + this.id;

constructor(private _http: Http) { }

getList(): Observable<IDetails[]> {
return this._http.get(this._productUrl)
.map((response: Response) => {
console.log(response)

return <IDetails[]>response.json().data;

});

}
}


Here i am subscribing to it,

constructor(public http: Http, private _service: GetAllList) {

this._service.getList()
.subscribe(details => this.details = details);
}


I am not sure where i went wrong,can some one suggest help

Answer

Run your web with empty database, then check your console log. You already have 'console.log(response)' in getList().

My guess response is either an empty string or an error message after json decode if database is empty, which will not work with ngFor.

You can modify getList() like following:

getList(): Observable<IDetails[]> {
  return this._http.get(this._productUrl)
    .map((response: Response) => {
      console.log(response)
      r = response.json().data;

      // Do your checking here
      //   if empty database, r = []

      return <IDetails[]>r;

  });
}

Or if you have control of the server side, make sure it will reply a json encoded empty array.

Comments