NgFor nur unterstützt zu Iterables Bindung wie Arrays

Question

Wenn ich Daten in der Datenbank haben, die Vorlage zeigt es aber, wenn ich Daten nicht haben, es zeigt die folgende Fehlermeldung:

---------NgFor only supports binding to Iterables such as Arrays.------

Meine Vorlage

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

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

      }); 

    } 
    } 

Hier ich es melde mich an,

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

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

Ich bin nicht sicher, wo ich schief gelaufen ist, kann jemand helfen vorschlagen?

Answer 1

Führen Sie Ihr Web mit einer leeren Datenbank aus und überprüfen Sie dann Ihr Konsolenprotokoll. Sie haben "console.log (response)" bereits in getList().

Meine Antwort ist entweder eine leere Zeichenfolge oder eine Fehlermeldung nach JSON dekodieren, wenn die Datenbank leer ist, die mit ngFor nicht funktioniert.

können Sie ändern getList() wie folgt vor:

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; 

    }); 
} 

Oder wenn Sie die Kontrolle über die Server-Seite haben, stellen Sie sicher, dass es eine json codiert leeres Array antworten.