NgForのみ、そのような私は、データベース内のデータを持っている場合は、テンプレートが表示されますが、私はデータを持っていないとき、それは次のようなエラーが表示さ

Question

配列として反復可能オブジェクトへの結合をサポートしています。

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

マイテンプレート

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

マイ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; 

      }); 

    } 
    } 

0私が間違っていたところ、私はそれに加入しています。ここ

、

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

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

私はいくつかのいずれかが助けを提案することができ、わかりませんか？

Answer 1

空のデータベースでWebを実行し、コンソールログを確認します。既にgetList（）に 'console.log（response）'があります。

データベースが空の場合、jsonデコード後の私の推測応答は空文字列かエラーメッセージです。これはngForでは機能しません。

次のようなGETLISTを（）変更することができます。

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; 

    }); 
} 

それとも、サーバー側のコントロールを持っている場合、それは空の配列をコード化JSONを返信させていただきますことを確認してください。