*ngfor json数组对象中的错误显示

error display in *ngfor json array object

提问by Rafi

when fetching json array object from rest api and trying to display in ngfor failed with the reason

从rest api获取json数组对象并尝试在ngfor中显示时失败的原因

error

错误

EXCEPTION: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. in [indexes in HomeComponent@5:37]

例外：找不到类型为“object”的不同支持对象“[object Object]”。NgFor 仅支持绑定到可迭代对象，例如数组。在 [HomeComponent@5:37 中的索引]

Code

代码

import {Component} from 'angular2/core';
import {HomeService} from './home.services';
import {Index} from './index';

@Component({
    selector: 'home-app',
    providers: [HomeService],

    template: `
        <section class="left_side">
            <article>
                <div class="div_home">
                    <div class="div_homeIndxPartition">
                        <div class="div_IndxPartition" *ngFor="#indObj of indexes">
                            <table width="500px" class="idx_cons_table_det">
                                <tr>
                                    <th align="center" color="#A9F5F2"><h3>{{indObj.name}} ({{indObj.tracker}})</h3></th>
                                    <th align="center">Value</th>
                                    <th align="center">Change</th>
                                    <th align="center">%</th>
                                </tr>
                                <tr>
                                    <td align="center" colspan="1"></td>
                                    <td align="center">{{indObj.value}}</td>
                                    <td align="center">{{indObj.change}}</td>
                                    <td align="center">{{indObj.percent}}%</td>
                                </tr>
                            </table>
                            <br/>
                            <table width="500px" class="idx_cons_table">
                                <tr>
                                    <th align="center">High</th>
                                    <th align="center">Low</th>
                                    <th align="center">Open</th>
                                    <th align="center">Close</th>
                                    <th align="center">52 Week High</th>
                                    <th align="center">52 Week Low</th>                             
                                </tr>
                                <tr>
                                    <td align="center">{{indObj.high}}</td>
                                    <td align="center">{{indObj.low}}</td>
                                    <td align="center">{{indObj.open}}%</td>
                                    <td align="center">{{indObj.close}}</td>
                                    <td align="center">{{indObj.yearHigh}}</td>
                                    <td align="center">{{indObj.yearLow}}%</td>
                                </tr>
                            </table>                        
                        </div>                      
                    </div>
                </div>
            </article>
        </section>
    `

})
export class HomeComponent {
    public indexes:Array<Index>=[];
    public error;

constructor(private _service: HomeService){
    this.indexes = _service.getIndexes().subscribe(
            data => this.indexes =  JSON.parse(data),
            error => alert(" Error is : " + error),
            ()=> console.log("finished")
         );
    console.log(this.indexes);
}
}

JSON Data

JSON 数据

[
  {
    "id": 1,
    "name": "FTSE 100",
    "ticker": "UKX",
    "value": 69875.23,
    "change": 100,
    "percent": 2.3,
    "high": 69875.23,
    "low": 69700.89,
    "yearHigh": 699999.23,
    "yearLow": 680005.23,
    "open": 69600.54,
    "close": 699000.97,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 2,
    "name": "FTSE 250",
    "ticker": "MCX",
    "value": 465820.85,
    "change": 100,
    "percent": 2.3,
    "high": 465880.12,
    "low": 465810.74,
    "yearHigh": 478990.34,
    "yearLow": 465320.23,
    "open": 69600.54,
    "close": 699000.97,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 3,
    "name": "FTSE All-Share",
    "ticker": "ASX",
    "value": 236549.23,
    "change": 100,
    "percent": 2.3,
    "high": 236949.23,
    "low": 236149,
    "yearHigh": 246949.21,
    "yearLow": 235549.29,
    "open": 236519.23,
    "close": 236649.23,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 4,
    "name": "Euro Stoxx 50",
    "ticker": "STOXX50E",
    "value": 123469.87,
    "change": 100,
    "percent": 2.3,
    "high": 123499.87,
    "low": 123439.87,
    "yearHigh": 123499.87,
    "yearLow": 123169.87,
    "open": 123465.87,
    "close": 123459.87,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 5,
    "name": "S&P 500 ",
    "ticker": "S500",
    "value": 358976.36,
    "change": 100,
    "percent": 2.3,
    "high": 358986.36,
    "low": 358946.36,
    "yearHigh": 359976.36,
    "yearLow": 357976.36,
    "open": 358970.36,
    "close": 358996.36,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 6,
    "name": "Dow Jones I.A.",
    "ticker": "INDU",
    "value": 456789.36,
    "change": 100,
    "percent": 2.3,
    "high": 456799.36,
    "low": 456779.36,
    "yearHigh": 456889.36,
    "yearLow": 456689.36,
    "open": 456729.36,
    "close": 456779.36,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 7,
    "name": "GOLD",
    "ticker": "",
    "value": 500,
    "change": 100,
    "percent": 2.3,
    "high": 700,
    "low": 300,
    "yearHigh": 1500,
    "yearLow": 350,
    "open": 450,
    "close": 470,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 8,
    "name": "Brent Crude",
    "ticker": "",
    "value": 112,
    "change": 100,
    "percent": 2.3,
    "high": 115,
    "low": 107,
    "yearHigh": 200,
    "yearLow": 72,
    "open": 110,
    "close": 115,
    "constituents": null,
    "runDate": "21/04/2015"
  }
]

回答by Thierry Templier

I think that the value you set in the indexesproperty isn't an array but an object.

我认为您在indexes属性中设置的值不是数组而是对象。

I would see several reasons for this:

我会看到几个原因：

• You receive the response instead of the payload from the getIndexesmethod. In this case, you could use the mapoperator in this method:

  getIndexes() {
    return this.http.get(...).map(res => res.json());
  }
  

• The received payload doesn't correspond to an array but some of its properties. In this case, you need to set this property into the indexesproperty.

• 您从getIndexes方法接收响应而不是有效负载。在这种情况下，您可以map在此方法中使用运算符：

  getIndexes() {
    return this.http.get(...).map(res => res.json());
  }
  

• 接收到的有效负载不对应于数组，而是对应于它的一些属性。在这种情况下，您需要将此属性设置到indexes属性中。

If you want to iterate over the properties of an object, you need to implement a custom filter like this:

如果你想遍历一个对象的属性，你需要实现一个像这样的自定义过滤器：

@Pipe({name: 'keyValues'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]);
    }
    return keys;
  }
}

and use it like that:

并像这样使用它：

<div class="div_IndxPartition" *ngFor="#indObj of indexes | keyValues">
  (...)
</div>

See this question:

看到这个问题：

• How to display json object using *ngFor

• 如何使用 *ngFor 显示 json 对象

回答by Shubham Verma

You should try this:

你应该试试这个：

In html:

在 html 中：

<div  *ngFor="let subsciption of subscriptions;">
                     <div class="col-md-6">
                        <h5 class="widget-title">{{subsciption.name}}</h5>
                    </div>
</div>

in .ts file:

在 .ts 文件中：

    export class SubscriptionComponent implements OnInit {
        private subscriptions: any =[]; 
        // private subscriptions: any ={};    // here dont use {}
    .
    .
    .
    .
    .

        getAllSubscriptions(queryString) {
            this._http.get(`${environment.base_url}/subscriptions` + queryString)
                .subscribe((response: Response) => {
                    this.subscriptions = response.json();
                },

                (error: Response) => {
                    console.log("Login error");
                });
        }
        this.getAllSubscriptions(query);

    }

回答by Belfield

You don't want to use pipes when working with Observables. This error is very generic and the best way is to throw in a console.log() and see where you are going wrong as it could be numerous things.

在使用 Observables 时，您不想使用管道。此错误非常普遍，最好的方法是输入 console.log() 并查看哪里出错了，因为它可能有很多问题。

My problem was my Array was inside the Object, and I was trying to loop over the Object. Other problems could include the mapping or the ngFor. My console output would look something like this:

我的问题是我的数组在对象内，我试图遍历对象。其他问题可能包括映射或 ngFor。我的控制台输出看起来像这样：

this.indexes = _service.getIndexes()
         .subscribe(
            data => {
                this.indexes = JSON.parse(data);
                console.log(indexes);
            },
            error => alert(" Error is : " + error),
                ()=> console.log("finished")
         );
    console.log(this.indexes);

So the fix I needed was something like this:

所以我需要的修复是这样的：

this.indexes = _service.getIndexes()
             .subscribe(
                data => {
                    this.myNewObject = JSON.parse(data);
                    this.indexes = this.myNewObject.indexes;
                },
                error => alert(" Error is : " + error),
                    ()=> console.log("finished")
             );
        console.log(this.indexes);

This was because the array was nested inside the Object, so I just created a new object and accessed the array by getting its property.

这是因为数组嵌套在对象中，所以我只是创建了一个新对象并通过获取其属性来访问数组。

回答by David Mendez Guardado

i see your answer, and the easy way to solve is just set the type of the object in the *ngFor to array like this:

我看到你的答案，解决的简单方法就是将 *ngFor 中的对象类型设置为这样的数组：

public indexes:Array<TYPE_OF_YOUR_DATA>=[];

回答by Vladyslav Babenko

I had same problem and my solution was without Pipes. I did not use variable in the template that returns Observer, create intermediate variable and assign result to it. For example, we will save stream to this.subbut result will save to this.indexeson success callback and will use this variable in the html template.

我有同样的问题，我的解决方案是没有管道。我没有在返回观察者的模板中使用变量，创建中间变量并将结果分配给它。例如，我们将保存流到this.sub但结果将保存到this.indexes成功回调并将在 html 模板中使用此变量。

@Component({
  template: `
<ul>
  <li *ngFor="let index of indexs">
    {{ index }}
  </li>
</ul>
`
})
export class HomeComponent {
  privat sub;
  public indexes:Array<Index>=[];
  public error;

  constructor(private _service: HomeService) {
    this.sub = this._service.getIndexes().subscribe(
        data => this.indexes =  JSON.parse(data),
        error => alert(" Error is : " + error),
        () => console.log("finished")
     );

  }
}