为什么我的Ionic 2视图中的数据不呈现?

时间:2017-01-10 23:33:19

标签: ios ionic2

我正在使用Ionic 2项目和我的前端代码渲染,就像我在Android和网络上所期望的那样,但是所有帐户都没有在iOS上正确呈现。

我正在使用Xcode 8.0和iPhone 6版本9.3.4以及Mac版本10.12

的package.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "@types/parse": "^1.2.32",
    "ionic-angular": "2.0.0-rc.4",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "underscore": "^1.8.3",
    "moment": "2.10.3",
    "sweetalert": "1.1.3",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.47",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "cordova-plugin-facebook4",
    "cordova-plugin-nativestorage",
    "parse-push-plugin"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "CPM: An Ionic project"
}

directory.html

<ion-header class="opaque">
  <ion-navbar no-border-bottom>
    <ion-title class="navtitle">Directory</ion-title>
  </ion-navbar>
  <ion-toolbar class ="customtoolbar">
    <ion-grid>
      <ion-row>
        <ion-segment value="filters" *ngFor="let personType of ageGender">
          <ion-segment-button value="personType" >{{personType}}</ion-segment-button>
        </ion-segment>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen class="card-background-page">
  <ion-list no-lines >
      <ion-item *ngFor="let offer of displayOffers">
        <ion-thumbnail item-left>
          <img src="{{offer.get('logo')._url}}">
        </ion-thumbnail>
        <ion-grid>
          <ion-row>
            <ion-col>
              <button class="listButton">Details</button>
            </ion-col>
          </ion-row>
        </ion-grid>
        <button ion-button clear item-right>{{offer.get("cashBackPercent")| percent}}</button>
      </ion-item>
  </ion-list>
</ion-content>

directory.ts

import { Component } from '@angular/core';
import  { Parse } from 'parse-js-sdk';

import { DataService } from '../../services/dataService';

@Component({
  selector: 'directory',
  templateUrl: 'directory.html'
})

export class Directory {
displayOffers: any[];
ageGender: any = ["Women", "Men", "Children"];

constructor(public dataService: DataService) {}

ionViewDidLoad() {
    var self = this;
    this.dataService.directoryOffers().then(function(offers){
      self.displayOffers = offers;
    })
  }
}

dataService.ts

import { Injectable } from '@angular/core';
import { Parse } from 'parse-js-sdk';

@Injectable()
export class DataService {

  constructor() {
  }

  directoryOffers(): any{
    var Offers = Parse.Object.extend("Offer");
    var offerQuery = new Parse.Query(Offers);
    offerQuery.equalTo("hasContract", true);
    offerQuery.notEqualTo("canceled", true);
    offerQuery.greaterThanOrEqualTo("untilDate", new Date());
    offerQuery.include('vendor');
    offerQuery.exists('logo');//display no offers that lack logos!
    return offerQuery.find();
  }
}

这就是它在web / Android上的外观: enter image description here 以下是您在iOS上看到的内容:

enter image description here

经过10个小时的工作,我很确定iOS并不喜欢“自我”所代表的范围变化。而不是这个&#39;在查询承诺内。因此,我无法在客户端上呈现数据。

查询返回A +承诺,据我所知,没有办法解析承诺,以便查询结果超出承诺范围,以便我们可以使用&#39;这个&#39;。我可能完全错了,但在Promise Resolution Procedure&#39; {{3}}&#39;否则就表明了。

1 个答案:

答案 0 :(得分:1)

在iOS网络浏览器上识别polyfill和Angular 2时出现问题。

对于新手,我的答案将详细说明。

首先找到iOS控制台日志: 1)打开Safari 2)通过Xcode加载(播放按钮)应用程序 3)转到开发菜单 4)选择您的设备 5)在应用程序完成加载之前,您将看到一个转到您的应用程序的选项。这样做。

从日志中的提示我发现了真正的错误。搜索后我添加了:

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.common.exceptions import TimeoutException

url ='http://example.com/'
driver = webdriver.Firefox()
driver.get(url)

delay = 5 # seconds

try:
    WebDriverWait(driver, delay).until(EC.presence_of_element_located(driver.find_elements_by_xpath('..//elementid')))
    print "Page is ready!"
    for image in driver.find_elements_by_xpath('..//img[@src]'):
        print image.get_attribute('src')
except TimeoutException:
    print "Couldn't load page"

到我上面的index.html的头部 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>