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:

`