Please help - DOM not reflecting updated resultset


#1

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:

  1. 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.

  2. cat.ts passes a parameter employeeModel to search.ts. In seach.ts constructor, the employeeModel parameter is populated, but when a button click calls presentPopover the employeeModel parameter is undefined.

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.


#2

Try tinkering with NgZone.
My implementation now uses the following provider

import {Injectable, NgZone} from '@angular/core';
import {ReplaySubject} from 'rxjs/ReplaySubject';

@Injectable()
export class CommunicateProvider {
    zone: NgZone;
    _messagethread$: ReplaySubject<any>;

    constructor() {
        this.zone = new NgZone({enableLongStackTrace: false});
    }

    get messagethread(){
        return this._messagethread$;
    }

    addMessage(message: any) {
        this.zone.run(() => {
            this._messagethread$.next(message);
        });
    }

}

Page

@Component({
    templateUrl: 'build/pages/communicate/communicate.html'
})
export class CommunicatePage {

    messagethread: any[];

    constructor(private communicateProvider: CommunicateProvider) { }

    onPageWillEnter() {
        this.communicateProvider.messagethread.subscribe((data) => { this.messagethread.unshift(data);/*or push/ }, (err) => { console.error(err); });
    }
}

I used the following tut for help:

[edit]
that => this


#3

Thanks twicejr.

I try the following with no success. Is this what you mean?

this.zone = new NgZone({ enableLongStackTrace: false });
    this.zone.run(() => {
      this.getEmployeeRange();
    });

#4

The error is in the cat.ts

When I change the following, it works again. Now I just need to workout how to make the search.ts only display the menu nav without a back button (this way it displays nothing). i.e make the searchPage the root.

// this.nav.insert(0, SearchPage, {
// employeeModel: this.employeeModel
// }).then(() => {
// const index = this.nav.getActive().index;
// this.nav.remove(index - 1);
// });
this.nav.push(SearchPage, {
employeeModel: this.employeeModel
});


#5

This works

  this.nav.insert(0, SearchPage, {
    employeeModel: this.employeeModel
  })

Problem is the navbar icon does display correctly but when clicked does nothing instead of launch the menu.

This goes to the correct page, with the navbar working, but does not reload the page (with the new parameter).

  let options = {
    employeeModel: this.employeeModel
  };
  this.nav.popToRoot(options);

#6

Hi I also use Zone

This is my code

import { Component,Inject,OnInit,NgZone } from ‘@angular/core’;
constructor()
{
this.zone = new NgZone({enableLongStackTrace: false});
this.addcomment=this.af.database.list(’/complaints/’+this.key+’/COMMENTS’).map(i=>{return i});
}
Submit(comments)
{
this.zone.run(()=>{
this.addcomment.push(comments);
})
}

But Dom Cannot Update

Kindly advice me ,

Thanks & Regards