angular - 错误 : Cannot find a differ supporting object '[object Object]' of type 'object' Angular 6

Question

我有一个问题。我寻找其他解决方案，但没有发现对我有帮助的。

错误是:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

我的模型.ts

export interface CEP {
    complemento: string;
    bairro: string;
    cidade: string;
    logradouro?: string;
    estado_info?: string[];
    cep: string;
    cidade_info?:string[]; 
    estado: string;
}

我的服务.ts

import { Injectable } from '@angular/core';
import { CEP } from './cep/cep.model';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
//import { map, tap } from 'rxjs/operators';

 @Injectable()
 export class CEPSerivce {

     constructor(private http: HttpClient) {}

     ceps(numCEP: string): Observable<CEP[]> {
         return this.http.get<CEP[]> 
      (`https://api.postmon.com.br/v1/cep/${numCEP}`);
     }
   }

我的模型.ts

 searchCEP() {

    console.log(this.cepDigitado);

    this.cepService.ceps(this.cepDigitado)
        .subscribe(cep => {
        this.cep = cep; console.log(this.cep); /*this.cepArray.push(this.cep);*/ console.log(this.cepArray);
        },
            error => { alert("Erro") });
}

我的组件.html

  <table>
    <tr *ngFor="let c of cep">
      <td>{{c.cidade}}</td>
    </tr>
  </table>

响应JSON

{
   "complemento": "de 1907/1908 ao fim",
   "bairro": "Aeroporto",
   "cidade": "Barretos",
   "logradouro": "Rua 26",
   "estado_info": {
      "area_km2": "248.221,996",
      "codigo_ibge": "35",
      "nome": "São Paulo"
   },
  "cep": "14783232",
  "cidade_info": {
      "area_km2": "1566,161",
      "codigo_ibge": "3505500"
   },
   "estado": "SP"
}

Answer 1

*ngFor 指令只对可迭代对象起作用。如果你想遍历一个对象的所有属性，你可以使用 keyValue pipe

<table>
    <tr *ngFor="let item of cep | keyValue">
      <td>{{item.key}} {{item.value}}</td>
    </tr>
</table>

注意:它需要 Angular 6.1 版本(keyValue 管道已添加到该版本中)

---

或者如果您只想显示任何对象的单个属性，您可以考虑将 cep 结果放入 ceps 集合中，如下所示。然后现有解决方案将按预期工作。

ceps: any[] = []
searchCEP() {
    console.log(this.cepDigitado);
    this.cepService.ceps(this.cepDigitado)
      .subscribe(cep => {
        this.ceps = [cep]; console.log(this.cep);
      })
}