错误：找不到类型为“object”Angular 6 的不同支持对象“[object Object]”

Question

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

错误是：

错误错误：找不到不同的支持对象“[object Object]” '对象'类型。 NgFor 仅支持绑定到 Iterables，例如 数组。

我的模型.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);
      })
}