Table only populates when clicking on sort field

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:

`<div class="row"> <ba-card title="Users" baCardClass="with-scroll"> <ng2-smart-table [settings]=“settings” [source]=“users” (deleteConfirm)=“onDeleteConfirm($event)”></ng2-smart-table> </ba-card>

</div>``

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

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