CODEWITHSUNDEEP
angular
MMR
MMR

Reputation: 3039

NgFor only supports binding to Iterables such as Arrays

When I have data in my database ,the template displays it but when I don't 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?

Upvotes: 1

Views: 1575

Answers (1)

John Siu
John Siu

Reputation: 5092

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.

Upvotes: 3

Related Questions