离子2页反应迟钝

Question

在Ionic 2下面的页面中查找从服务中提取数据并立即变得无关紧要的页面，即使在浏览器上也无法点击设备，模拟器上的任何内容。

home.html的

<ion-header>
  <ion-navbar hideBackButton="true" danger>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Shoppa</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="cards-bg social-cards">

  <ion-card *ngFor="let campaign of campaigns">

    <ion-item>
      <ion-avatar item-left>
        <img [src]="campaign.image">
      </ion-avatar>
      <h2>{{campaign.name}}</h2>
      <p>July 5, 2016</p>
    </ion-item>

    <img [src]="campaign.image">

    <ion-card-content>
      <p>{{campaign.description}}</p>
    </ion-card-content>

    <ion-row>
      <ion-col>
        <button primary clear small (click)="likeCampaign(campaign)" disabled= {{buttonDisabled}}>
          <ion-icon name='thumbs-up'></ion-icon>
          <div>{{campaign.likes.length}} Likes</div>
        </button>
      </ion-col>
      <ion-col>
        <button primary clear small (click)="shareCampaign(campaign)">
          <ion-icon ios="ios-share" md="md-share"></ion-icon>
          <div>{{campaign.share.length}} Shares</div>
        </button>
      </ion-col>
      <ion-col>
        <button primary clear small (click)="optInToCampaign(campaign)">
          <ion-icon name='person-add'></ion-icon>
          <div>{{campaign.wantin.length}} Opt In</div>
        </button>
      </ion-col>
    </ion-row>

  </ion-card>

</ion-content>

<style>
  .social-cards ion-col {
    padding: 0;
  }
</style>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Toast, SocialSharing } from 'ionic-native';

import { CampaignProvider } from '../../providers/campaign-provider/campaign-provider';
import { UserProvider } from '../../providers/user-provider/user-provider';

@Component({
  templateUrl: 'build/pages/home/home.html',
  providers: [CampaignProvider]
})

export class HomePage {
  campaignOject: {name?:string, image?:string, description?: string, likes?: number, shares?:number, wantin?:number } = {};
  campaigns = [];
  like:{email?:string, campaignid?:string} ={};
  buttonDisabled:boolean;
  user:{email?: string} = {};

  constructor(public navCtrl: NavController, private campaignProvider: CampaignProvider, private userProvider: UserProvider) {
    this.buttonDisabled = null;

    this.user.email = userProvider.GetLocalObject("user");
    this.getCampaigns();
  }

  ionViewWillEnter(){
    console.log('Entered into the view');
  }

  ionViewDidEnter(){
    console.log('Page was fully loaded');
  }

  getCampaigns(){
    console.log(this.user);

    this.campaignProvider.GetUserCampaigns(this.user).subscribe(
        data => {
        console.log(data.result);
        console.log(data.message);
        this.campaigns = data.result;
      },
        err => {
        console.log(err);
      },
      () => console.log('Pulling data')
    )
  }

  likeCampaign(campaign){
    console.log(campaign.name + ' has been liked');


    this.like.email = 'kolexinfos@gmail.com';
    this.like.campaignid = campaign._id;
    //TODO: Pick the User Email from localstorage
    //campaign.email = 'kolexinfos@gmail.com';

    console.log(this.like);
    this.campaignProvider.LikeCampaigns(this.like).subscribe(
      data => {
        console.log(data.result);
        this.buttonDisabled = true;
        Toast.show(campaign.name + " liked", "short", 'bottom').subscribe(
            toast => {
            console.log(toast);
          }
        );

      },
      err => {
        console.log(err);
      },
      () => console.log(campaign.name + ' campaign was liked.')
    )
    this.getCampaigns();
  }

  optInToCampaign(campaign){
    console.log(campaign.name + ' has been opted into' );

    this.like.email = 'kolexinfos@gmail.com';
    this.like.campaignid = campaign._id;
    //TODO: Pick the User Email from localstorage

    this.campaignProvider.WantInCampaign(this.like).subscribe(
        data => {
        console.log(data.result);
          Toast.show(campaign.name + " opted in to", "short", 'bottom').subscribe(
              toast => {
              console.log(toast);
            }
          );
      },
        err => {
        console.log(err);
      },
      () => console.log(campaign.name + ' campaign was liked.')
    )

    this.getCampaigns();
  }

  shareCampaign(campaign){
    console.log(campaign.name + ' has been shared');

    this.like.email = 'kolexinfos@gmail.com';
    this.like.campaignid = campaign._id;
    //TODO: Pick the User Email from localstorage

    SocialSharing.share(campaign.description, campaign.name,campaign.image).then(() =>{
      console.log("Success");

        this.campaignProvider.ShareCampaign(campaign).subscribe(
            data => {
            console.log(data.result);
              Toast.show(campaign.name + " shared", "short", 'bottom').subscribe(
                  toast => {
                  console.log(toast);
                }
              );
          },
            err => {
            console.log(err);
          },
          () => console.log(campaign.name + ' campaign was shared.')
        )

    }).catch(() => {
      console.log("Error");
    });

    this.getCampaigns();
  }

}

控制台日志

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
Native: tried calling Splashscreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
ionViewWillEnter called
kolexinfos@mail.com
swiper initEvents attach
Object {email: "kolexinfos@mail.com"}
Username for user [object Object]
Entered into the view
Object {email: "kolexinfos@mail.com"}
Username for user [object Object]
Entered into the view
Page was fully loaded
[Object, Object, Object]
Successfully pulled the Campaigns 
Pulling data
Mixed Content: The page at 'https://ide.c9.io/kolexinfos/shoppa' was loaded over HTTPS, but requested an insecure image 'http://preptitude.com.ng/shoppa/shoprite.jpg'. This content should also be served over HTTPS.
Mixed Content: The page at 'https://ide.c9.io/kolexinfos/shoppa' was loaded over HTTPS, but requested an insecure image 'http://preptitude.com.ng/shoppa/shoprite.jpg'. This content should also be served over HTTPS.
Mixed Content: The page at 'https://ide.c9.io/kolexinfos/shoppa' was loaded over HTTPS, but requested an insecure image 'http://preptitude.com.ng/shoppa/deola.jpg'. This content should also be served over HTTPS.
Mixed Content: The page at 'https://ide.c9.io/kolexinfos/shoppa' was loaded over HTTPS, but requested an insecure image 'http://preptitude.com.ng/shoppa/nike.jpg'. This content should also be served over HTTPS.
[Object, Object, Object]
Successfully pulled the Campaigns 
Pulling data
Mixed Content: The page at 'https://ide.c9.io/kolexinfos/shoppa' was loaded over HTTPS, but requested an insecure image 'http://preptitude.com.ng/shoppa/shoprite.jpg'. This content should also be served over HTTPS.
Mixed Content: The page at 'https://ide.c9.io/kolexinfos/shoppa' was loaded over HTTPS, but requested an insecure image 'http://preptitude.com.ng/shoppa/shoprite.jpg'. This content should also be served over HTTPS.
Mixed Content: The page at 'https://ide.c9.io/kolexinfos/shoppa' was loaded over HTTPS, but requested an insecure image 'http://preptitude.com.ng/shoppa/deola.jpg'. This content should also be served over HTTPS.
Mixed Content: The page at 'https://ide.c9.io/kolexinfos/shoppa' was loaded over HTTPS, but requested an insecure image 'http://preptitude.com.ng/shoppa/deola.jpg'. This content should also be served over HTTPS.
Mixed Content: The page at 'https://ide.c9.io/kolexinfos/shoppa' was loaded over HTTPS, but requested an insecure image 'http://preptitude.com.ng/shoppa/nike.jpg'. This content should also be served over HTTPS.
Mixed Content: The page at 'https://ide.c9.io/kolexinfos/shoppa' was loaded over HTTPS, but requested an insecure image 'http://preptitude.com.ng/shoppa/nike.jpg'. This content should also be served over HTTPS.

Answer 1

我会尝试在内调用this.getCampaigns();。这应该确保在尝试访问它们之前实例化所有提供程序。

由于此类方案的异步性质而导致的另一个问题是，如果在订阅发生之前发出了值。在我之前的一些场景中，我会在ionViewDidLoad(){}内订阅。这是一个lifecycle hook of Angular，我不确定equivalent hook is for Ionic。