1
サービスからデータを取得してただちに非応答になるIonic 2のページを見つけてください。ブラウザ上でもデバイスやシミュレータ上で何かをクリックすることはできません。Ionic 2 Page Unresponsive
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 = '[email protected]';
this.like.campaignid = campaign._id;
//TODO: Pick the User Email from localstorage
//campaign.email = '[email protected]';
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 = '[email protected]';
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 = '[email protected]';
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
[email protected]
swiper initEvents attach
Object {email: "[email protected]"}
Username for user [object Object]
Entered into the view
Object {email: "[email protected]"}
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.
'home.ts'コード全体を投稿できますか？ – sebaferreras
@sebaferreras doneチェックの編集 – kolexinfos
ログをコンソールから投稿できますか？ –