将属性推入数组离子答案

【问题标题】：push a property into array ionic将属性推入数组离子
【发布时间】：2018-10-19 12:02:01
【问题描述】：

我的 API 看起来像这样： my API

问题是，当我想使用 API 进行数据绑定时，我得到一个错误，说数据绑定只能 用于数组。不是对象。我的 API 需要的是只有城市。我发现可能是因为 json 文件是嵌套对象，不能转换为数组。所以我想看看是否有一种方法可以提取城市并将其放入一个数组中以用于绑定。为了清楚起见，我发布了我的代码： StatesProvider 用于获取 API：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable()
export class StatesProvider {
constructor(public http: HttpClient, public platform: Platform) {}
getCities() {
  return new Promise(resolve => {
  this.http.get("https://***"+lang+"/state/1").subscribe(data => {
    resolve(data);
  }, err => {
    console.log(err);
  });
 });
}}

我的 state.ts 组件：

import { Component, ViewChild } from '@angular/core';
import { NavController, App, ViewController, Slides } from 'ionic-angular';
import { StatesProvider } from '../../providers/states/states';
@Component({
  selector: 'page-state',
  templateUrl: 'sell.html'
})
export class StatePage {
  @ViewChild('mySlider') slider: Slides;
  cities: any;
  constructor(public viewCtrl: ViewController, public appCtrl: App,
    public navCtrl: NavController, public stateProvide: StatesProvider) {
    this.getCities();
  }
  getCities() {
    this.stateProvide.getCities()
      .then(data => {
        this.cities = data;
        console.log(this.cities);
      });
  }

最后是 html 文件，我有问题的部分看起来像这样：

<ion-content padding>
  <ion-slides #mySlider (ionDidChange)="onSlideChanged($event)">
    <ion-slide *ngFor="let city of cities.cities">
      <ion-list>
        <ion-item>
          <ion-thumbnail item-left>
            <img [src]="city.image_thumb">
          </ion-thumbnail>
          <h2 text-end>{{city.name}}</h2>
        </ion-item>
      </ion-list>
    </ion-slide>
   </ion-slides>
 </ion-content>

现在，当我在某处读到这样的 API 时，您可以使用 *ngFor，就像我写的那样：*ngFor="let city of urbans.cities"。但我仍然收到错误消息：Cannot read property 'cities' of undefined

【问题讨论】：

尝试先在 HTML 中打印，无论数据是否到来，使用 {{cities?.cities | JSON}}
你能提供从this.stateProvide.getCities()返回的JSON吗？
@BasavarajBhusani 您可以在附件图片中查看 JSON

标签： angular typescript ionic3

【解决方案1】：

您的代码看起来不错，尝试像这样使用安全导航? -

<ion-slide *ngFor="let city of cities?.cities">

【讨论】：

很高兴知道:)