We are building an application using Cordova and Angular 2. I have the following code:
import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core';
import { Location } from '@angular/common';
declare var WL : any;
@Component({
selector: 'app-store',
templateUrl: './store.component.html',
styleUrls: ['./store.component.css']
})
export class StoreComponent implements OnInit {
status: string;
document: any;
constructor(private _location: Location, private changeDetector: ChangeDetectorRef,
private zone: NgZone) { }
ngOnInit() {
var collectionName = 'people';
this.status = "JSONStore is not yet initialized!";
if(typeof WL !== "undefined" && typeof WL.JSONStore.get(collectionName) !== "undefined")
this.status = "JSONStore is initialized!";
}
}
jsonStoreInit(){
var that = this;
var collectionName = 'people';
// Object that defines all the collections.
var collections = {
// Object that defines the 'people' collection.
people : {
// Object that defines the Search Fields for the 'people' collection.
searchFields : {name: 'string', age: 'integer'}
}
};
// Optional options object.
var options = { };
/* // Optional username, default 'jsonstore'.
username : 'carlos',
// Optional password, default no password.
password : '123',
// Optional local key generation flag, default false.
localKeyGen : false
};*/
WL.JSONStore.init(collections, options).then(function () {
// Data to add, you probably want to get
// this data from a network call (e.g. MobileFirst Adapter).
var data = [{name: 'carlos', age: 10}];
// Optional options for add.
var addOptions = {
// Mark data as dirty (true = yes, false = no), default true.
markDirty: true
};
// Get an accessor to the people collection and add data.
return WL.JSONStore.get(collectionName).add(data, addOptions);
})
.then(function (numberOfDocumentsAdded) {
that.status = "JSONStore is initialized!";
})
.fail(function (errorObject) {
// Handle failure for any of the previous JSONStore operations (init, add).
alert("Error");
console.log(errorObject);
});
}
}
On a web browser, this works great. When jsonStoreInit() fires, it sets status and updates the UI to "JSONStore is initialized". On the Cordova app, if I don't utilize manual change detection, it will not update the UI. For example, see below where I have //IF THIS ISN'T HERE, IT WILL NOT UPDATE IN CORDOVA:
ngOnInit() {
var collectionName = 'people';
this.status = "JSONStore is not yet initialized!";
if(typeof WL !== "undefined" && typeof WL.JSONStore.get(collectionName) !== "undefined")
this.status = "JSONStore is initialized!";
//IF THIS ISN'T HERE, IT WILL NOT UPDATE IN CORDOVA
this.changeDetector.markForCheck();
this.zone.run(()=> function(){});
}
}
jsonStoreInit(){
var that = this;
var collectionName = 'people';
// Object that defines all the collections.
var collections = {
// Object that defines the 'people' collection.
people : {
// Object that defines the Search Fields for the 'people' collection.
searchFields : {name: 'string', age: 'integer'}
}
};
// Optional options object.
var options = { };
/* // Optional username, default 'jsonstore'.
username : 'carlos',
// Optional password, default no password.
password : '123',
// Optional local key generation flag, default false.
localKeyGen : false
};*/
WL.JSONStore.init(collections, options).then(function () {
// Data to add, you probably want to get
// this data from a network call (e.g. MobileFirst Adapter).
var data = [{name: 'carlos', age: 10}];
// Optional options for add.
var addOptions = {
// Mark data as dirty (true = yes, false = no), default true.
markDirty: true
};
// Get an accessor to the people collection and add data.
return WL.JSONStore.get(collectionName).add(data, addOptions);
})
.then(function (numberOfDocumentsAdded) {
that.status = "JSONStore is initialized!"
//IF THIS ISN'T HERE, IT WILL NOT UPDATE IN CORDOVA
this.changeDetector.markForCheck();
this.zone.run(()=> function(){});
})
.fail(function (errorObject) {
// Handle failure for any of the previous JSONStore operations (init, add).
alert("Error");
console.log(errorObject);
});
}
I'm also seeing this on simple button clicks to set a variable. Nothing happens in Cordova unless I manually use change detection. I am just learning Angular 2, so any help on what I'm doing wrong is greatly appreciated.
