Question

在控制台中收到此错误：

找不到类型不同的支持对象“ [object Object]” '宾语'。 NgFor仅支持绑定到数组等Iterable。

services.ts

      private url = "https://api.iextrading.com/1.0/stock/market/batch?symbols=SNAP,fb,AIG%2b,GOOG,AAPL,AMZN&types=quote";

      constructor(private http: HttpClient) {}

      getCID(): Observable<any> {
        return this.http.get<any>(this.url);
      }

component.ts

      ngOnInit() {
        this.svc.getCID().subscribe(data => {
          this.cidData = data;
          console.log(data);
        });

component.html

    <div *ngIf="cidData">
      <ul>
        <li *ngFor="let x of cidData">
          <a routerLink="/companydetails/{{x.symbol}}">{{x.symbol}}</a>

API调用给出

    {"GOOG":{"quote":{"symbol":"GOOG","companyName":"Alphabet Inc."}}, "SNAP":{etc...}

我认为问题在于cidData不是数组，但是我不确定如何将其作为数组返回

Answer 1

如果您使用的是角度版本6，则可以使用内置的管道键值来迭代对象

 <li *ngFor="let x of cidData | keyvalue">
      <a routerLink="/companydetails/{{x.value.quote.symbol}}">{{x.value.quote.symbol}}</a>

Answer 2

@Gigarthan撞到了头！内置管道的关键值是一个救命稻草

import { QuoteCategories } from '../../Components/QuoteCategories'

Answer 3

要通过Object.values（obj）将对象转换为数组，您可以看到here

// object with your example here
    ngOnInit() {
        this.svc.getCID().subscribe(data => {
            this.cidData = data;
            let array = 
            Object.values(this.cidData.GOOD) 
            // here you have an array    
            console.log(array);
   });

ngFor over对象而不是数组？

3 个答案: