Error NgFor 仅支持绑定到 Iterables，例如 Arrays。如何将 JSON 对象转换为数组对象？

Question

我无法在 HTML 中显示来自我的 API 响应的数据，因为响应类型是对象，我无法转换为数组。

这是来自 API 的回复：

这是我的服务，可以向我的 API

发送 HTTP 请求

 url: string = 'http://localhost:3000/aduanas/'
  constructor(public aduanas: AduanasService, private http: HttpClient) { }

 
  // getInfo(){
    
  //   console.log();
  // }

   getInfoAduanas():Observable<Aduanas>{
    return this.http.get<Aduanas>(`${this.url}${this.id.value}`)
  }
}

这是我的界面：

export interface Aduanas {
    id:                 number;
    estado:             string;
    nombre:             string;
    telefono:           string;
    horario_sem:        string;
    horario_fin:        string;
    direccion:          string;
    tipo:               string;
    agentes:            string;
}

这是我订阅的组件

 customList:Aduanas;
  id = this.aduanas.markerId;
  constructor(private modalController: ModalController, public aduanas: AduanasService, public api: ApiService) { }

  ngOnInit() {

   
    this.api.getInfoAduanas().subscribe( data => {
      this.customList = data;

      console.log(this.customList);
    });
  }

我收到这个错误：

这是我的 HTML 组件：

Answer 1

你可以简单地放在中括号上

 this.api.getInfoAduanas().subscribe( data => {
  this.customList = [data];

  console.log(this.customList);
});

Answer 2

您正在从 API 响应中获取一个对象，并且 *ngFor 用于遍历数组以在模板中显示值。如果你想迭代一个对象，你应该在模板中使用 Object.keys() 方法。

HTML :-

<div class="text-align:right" *ngFor="let key of Object.keys(customList)">
  <h2 class="title1"> Key-> {{key}} and value is -> {{customList[key]}}</h2>
</div>

TS :-

  customList:Aduanas;
  id = this.aduanas.markerId;
  Object = Object;


  constructor(private modalController: ModalController, public 
  aduanas:AduanasService,public api: ApiService) { }
    
  ngOnInit() {
     this.api.getInfoAduanas().subscribe( data => {
         this.customList = data;
         console.log(this.customList);
      });
   }

Error NgFor 仅支持绑定到 Iterables，例如 Arrays。如何将 JSON 对象转换为数组对象？

Error NgFor only supports binding to Iterables such as Arrays. How to convert JSON object to Array Object?

arrays

object

observable

ionic-framework

angular