2017-01-10 9 views
1

私はIonic 2プロジェクトで作業しています。フロントエンドコードは、Androidとウェブでは期待していましたが、すべてのアカウントでiOS上で正しくレンダリングされるものはありません。私のデータはIonic 2ビューでレンダリングされないのはなぜですか?

私は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

でのXcode 8.0を使用しています
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(); 
    } 
} 

これは、それがウェブ/ Android上でどのように見えるかです:ここでは enter image description here あなたはiOSの上で見るものです:

enter image description here

仕事の10時間後、私はかなりよiOSではクエリの約束の中で「this」ではなく「self」で表されるスコープの変更が気に入らないことが確実です。このため、私はクライアント上でデータをレンダリングできません。

クエリはA +約束を返します。私が知る限り、約束を解決する方法はありませんので、クエリの結果が約束の外にあるので、 'this'を使用できます。私は完全に間違っている可能性がありますが、特に示された 'Promise Resolution Procedure'には何も見えませんでした。

+1

あなたはpackage.jsonを共有できますか?どのバージョンを試しましたか? –

答えて

1

iOS Webブラウザでポリフィルと角度2が認識されていました。

初心者の方は、私の答えで詳しく説明します。

まずiOSのコンソールログ見つける:) 1)Safariを開き 2)負荷(プレイボタン)Xcodeの 3を介してアプリを開発メニュー 4へ移動)あなたのデバイス 5を選択)右のアプリが終了する前に、読み込むと、アプリに行くオプションが表示されます。そうする。

ログのヒントから、実際のエラーが見つかりました。検索後、私はコメントを追加しました: <script src="cordova.js"></script>上記の私のindex.htmlの頭に

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script> 

を。

関連する問題