One of the tasks in my Angular 2 application involves retrieving data from a Firebase database and storing it in a FirebaseListObservable. I have a method called getStatus that is supposed to determine the number of elements in this FirebaseListObservable. If there are elements present, I want it to return 'glyphicon-ok', and if the list is empty, I want it to return 'glyphicon-remove'. However, the code I have shared below is not working as expected.
component.ts
assignments: FirebaseListObservable<any>
submission: FirebaseListObservable<any>
ngOnInit() {
this.assignments = this._getAsnService.getAsnByCourseBatch(AuthService.courseBatch);
}
getStatus(asnDetailKey) {
// Searching assignment in database
this.submission = this._db.list(`/submissions/${AuthService.uid}/`, {
query: {
orderByChild: 'asnDetailKey',
equalTo: asnDetailKey
}
});
// If assignment is found return 'glyphicon-ok' else return 'glyphicon-remove'
this.submission.subscribe(sub => {
this.status = sub.length > 0 ? 'glyphicon-ok' : 'glyphicon-remove';
});
return this.status;
}
component.html
<table class="table table-bordered" *ngIf="!isLoading">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Due Date</th>
<th>Status</th>
</tr>
<tr *ngFor="let assignment of assignments | async" [hidden]="filter(assignment)">
<td> <span class="AsnName" [routerLink]="['view', assignment.$key]"> {{ assignment.AsnName }} </span> </td>
<td> {{ assignment.subject }} </td>
<td> {{ assignment.dueDate }} </td>
<td> <i class="glyphicon" [ngClass]="getStatus(assignment.$key)"></i> </td>
</tr>
</table>
Thank you.