Closed
Description
Basically I am loading the data with async and for some reason the data of the table is not loading that way:
constructor(private userService : UserService){
Cookie.setCookie('RADLOGINUSERNAME','ricardo');
let user = '';
self = this;
userService.getDirectReports(Cookie.getCookie('RADLOGINUSERNAME'))
.subscribe(res => {
//For some reason object data is within the result object
let res = res.data;
this.user = res.dn;
res.directReports.forEach(function(user, i){
self.data.push({
name : user,
accountExpiry : res.reportInfo[i][0],
passwordExpiry: res.reportInfo[i][1],
accountLocked : res.reportInfo[i][2],
status : 'Idle'
})
});
console.log(self.data);
});
}
<table class="table table-hover" [mfData]="data" #mf="mfDataTable">
<thead>
<tr>
<th></th>
<th>Student Name</th>
<th>Account Expiry</th>
<th>Password Expiry</th>
<th>Account Locked</th>
<th>Changes</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of mf.data">
<td>
<input class="checkBox" id="{{id}}Checkbox" ng-click="handleClick(id, dn)" type="checkbox">
</td>
<td>
<div id="{{id}}PassErrors">
{{dnToFullName(user.name)}}
<span ng-show="errors" id="{{id}}Errors" style="color:red"></span>
</div>
</td>
<td>
<span id="{{id}}AccExp" class="label label-default">{{user.accountExpiry}}</span>
</td>
<td>
<span id="{{id}}PassExp" class="label label-default">{{user.passwordExpiry}}</span>
</td>
<td>
<div ng-if="locked !== \\"><span id="{{id}}LockedStatus" class="label label-danger">Locked</span></div>
</td>
<td>
<span id="{{id}}Status" class="label label-default">Idle</span>
</td>
</tr>
</tbody>
</table>
Edit:
On my AppComponent class is where I have the data array as follows:
data = [{
name : 'test',
accountExpiry : '10/10/10'
}];
The data that was loaded statically loads fine but the rest of the data that is pushed into it later once it gets it from the userservice never gets displayed on the table.