NgFor 仅支持绑定到 Iterables，例如 Arrays答案

【问题标题】：NgFor only supports binding to Iterables such as ArraysNgFor 仅支持绑定到 Iterables，例如 Arrays
【发布时间】：2016-08-16 12:14:42
【问题描述】：

当我的数据库中有数据时，模板会显示它，但是当我没有数据时，它会显示以下错误：

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

           });

     }
   }

我在这里订阅它，

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

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

我不确定我哪里出错了，有人可以提供帮助吗？

【问题讨论】：

你应该重构你的代码！
抱歉 Youcef Laidani，我不明白
看起来您在this.details 中在getList 之后有对象或编号。
如果没有看到你得到的 json，很难确切地说出问题是什么，但我同意@flapenguin。你肯定会得到一些你无法迭代的价值。

标签： angular

【解决方案1】：

使用空数据库运行您的网站，然后检查您的控制台日志。您已经在 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 编码的空数组。

【讨论】：