Hi All,
I had some code working perfectly, then after updating to cordova from 6.3.0 to 6.3.1, it doesn’t work anymore. I tried downgrading back to 6.3.0. but it still does not work. However, I think my code should work with 6.3.1, so I am probably doing something incorrect in my code.
I have a list of items, and then when I update the list, the DOM is not reflecting the update.
There are 2 issues here:
-
The first time I access the page from the menu, it returns 15 rows, and displays them correctly. However I then access the page with a parameter (
employeeModel
) from another page (cat.ts
) and the JSON call only returns 3 rows, but the DOM is displayed before the JSON call returns and displays 15 rows. -
cat.ts
passes a parameteremployeeModel
tosearch.ts
. Inseach.ts
constructor, theemployeeModel
parameter is populated, but when a button click callspresentPopover
theemployeeModel
parameter isundefined
.
search.html
... <div id="pinButton"><button (click)="presentPopover()" secondary><ion-icon name="funnel"></ion-icon></button></div> ... <ion-list> <ion-item *ngFor="let item of employeeModels"> <ion-item> <ion-row > <ion-col><h2>{{item.firstName}}</h2></ion-col> </ion-row> </ion-item> </ion-item> </ion-list>
search.ts
... @Component({ templateUrl: 'build/pages/search/search.html', providers: [EmployeeService, UtilityService], changeDetection: ChangeDetectionStrategy.OnPush })
export class SearchPage { ... private employeeModel: EmployeeModel; private employeeModels: EmployeeModel[] = []; ... constructor(ref: ChangeDetectorRef, nav: NavController, employeeService: EmployeeService, utilityService: UtilityService, private navParams: NavParams, private popoverController: PopoverController) { this.ref = ref; this.nav = nav; this.employeeService = employeeService; this.utilityService = utilityService; this.employeeModel = navParams.get('employeeModel'); console.log(this.employeeModel); this.getEmployeeRange(); } ... getEmployeeRange() { console.log(this.employeeModel); this.searchLoading = true; var promise: Promise<EmployeeModel[]>; promise = this.employeeService.getEmployeeRangeSearch(this.firstResult, this.MAX_RESULTS, this.getSubCategoryString()) promise.then((employeeModels: EmployeeModel[]) => { for (var index = 0; index < employeeModels.length; index++) { this.employeeModels.push(employeeModels[index]); } console.log(this.employeeModels.length); this.searchLoading = false; this.ref.markForCheck(); }); }
presentPopover(event: Event) { console.log('presentPopover: '+this.employeeModel); console.log(this.employeeModel); let popover: Popover = this.popoverController.create(SearchPopOverPage, {employeeModel: this.employeeModel}); popover.present(); }
cat.ts
console.log(this.employeeModel); this.nav.insert(0, SearchPage, { employeeModel: this.employeeModel, }).then(() => { const index = this.nav.getActive().index; this.nav.remove(index - 1); });
I have tried removing changeDetection: ChangeDetectionStrategy.OnPush
with the same problems occurring.