Table only populates when clicking on sort field

[radha89]

I am pulling data from a database and using angular 2 Observables to subscribe returned records and stored as objects in a local array variable. I implemented http.get() inside a service and subscribed the observable inside my component under ngOnInit(). For some reason the data is only being loaded when I click on a column title (i.e. on sort). Why am I not able to simple load the data?

I get no data found when I go to the webpage:

When I click on a field, the data is loaded like so:

This is the code inside my component:

  initData(data) {
    this.allUsers = data;
    for(var i = 0; i < this.allUsers.data.length; i++) {
      if(this.allUsers.data[i].isactive == "true") {
        this.allUsers.data[i].isactive = "yes";
      } else {
        this.allUsers.data[i].isactive = "no";
      } 
      this.users.push({
        username: this.allUsers.data[i].username,
        firstname: this.allUsers.data[i].firstname,
        lastname: this.allUsers.data[i].lastname,
        lastloggedin: this.allUsers.data[i].lastloggedin,
        isactive: this.allUsers.data[i].isactive
      });
    }
  }


  subscribeUsers() {
    this._userService.getUsers()
    .subscribe(
        data => this.initData(data),
        error => this.handleError(),
        () => {

          this.source.load(this.users);
          console.log(this.source);
          console.log(typeof this.source);
          console.log("success");
      });
  }


  ngOnInit() { 
    this.subscribeUsers();
    console.log("show all users");
  }

This is the code inside my template:

`

<ba-card title="Users" baCardClass="with-scroll"> <ng2-smart-table [settings]="settings" [source]="users" (deleteConfirm)="onDeleteConfirm($event)">

``

[nnixaa]

Hi @radha89, could you try calling this.source.refresh(); after this.source.load(this.users);?

[radha89]

Hi there. Calling those methods didn't work for me when I tried. However, I managed to fix it. In the template inside <div> tag I just added: *ngIf="this.users.length > 0". That did the trick for me. Thanks for getting back to me though.

[d-kostov-dev]

I have the same issue. And I'm only using the demo code (this.data = [...]) and it's not working.

[d-kostov-dev]

Ok got it. Check if your component/page has "changeDetection: ChangeDetectionStrategy.OnPush". Everything is working after removing it..and it's was not needed there.

[carscx]

I have the same issue. Only when click into a cell, I obtain the data.

[viditg2896]

I am struggling with the same issue @nnixaa . Please help!

[orgmatileg]

I have same issues, anyone know how to fix this?

[hanesjw]

This is not the most ideal solution but so far it's working for me. Maybe it will help shed some light on to what the actual issue is. This definitely seems hacky to me but here is what I did to get it to work...

I'm using ngrx and want to utilize angular's OnPush change detection.

I have a parent component set to "changeDetection: ChangeDetectionStrategy.OnPush". Yes if I change this back to the default strategy it works, but I want to use OnPush.

My child component contains the ng2-smart-table component. This component takes in an array of objects using the @Input property. This object is what is used as the [source] input for the ng2-smart-table.

If I use this @Input object to iterate on any other DOM element like a ul>li it works fine. So the OnPush works, the smart-table is just not detecting any changes. I'm assuming the reason the data loads after a button click is because that triggers the angular detection to mark it as changed so it then updates it later in the cycle.

What I did was force the change detection to kick in on the ngOnChanges lifecycle hook. The component looks like this...

export class UserTableComponent implements OnInit, OnChanges {
  
  @Input() users: User[];    
  settings: any;

  constructor(private cd: ChangeDetectorRef) {
  }

  ngOnInit() {        
    this.initSettings();    
  }

  ngOnChanges(changes: SimpleChanges): void {            
    setTimeout(() => {
      this.cd.detectChanges();
    }, 0);
  }
}

If i remove the setTimeout it doesn't work for some reason. Yes it seems hacky but it works for me. I don't know if I'm doing something wrong or if ng2-smart-table has a bug that isn't detecting changes correctly. Anyways, hope it helps.

[Ruslancic]

2021, and this bug is not fixed yet...

[victorwvieira]

Recently I had an experience using a smart-table component that some rows/data in the table just appears when the mouse hovers over the table or happens other interaction on the screen.

After investing some time in debugging I found the problem that create this strange behaviour. I'm using custom components and I developed some rules inside of these custom components, every time that these rules broke, the table stops loading the data and stay with this "hover" behaviour.

Solving the broken code inside of each custom component solved my problem and stopped this strange behaviour.

The broken code was a variable, type: number, using a string function like .toLowerCase() function.