In my Angular 6 project, I have implemented a WIJMO grid in the template that pulls data from a database table. Each row in the grid should display either a delete button or an un-delete button based on the condition specified using *ngIf else:
<wj-flex-grid>
<wj-flex-grid-column [header]="'ID'" [binding]="'ID'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'deleted'" [binding]="'deleted'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'delete/undelete buttons'" [binding]="'buttons'">
<button *ngIf="!deleted; else unDeleted">Delete</button>
<ng-template #unDeleted>
<button>Un-Delete</button>
</ng-template>
</wj-flex-grid-column>
</wj-flex-grid>
The challenge I am facing is with handling the deleted property in the .ts file. I need to set and access this property multiple times for each row in the table, but it seems that *ngIf only recognizes it after its last definition.
In my TypeScript code, I use a for loop to iterate over every data item and set the deleted property to true or false based on a column value retrieved from the database. If the last row in the grid is marked as deleted, then all buttons will display undelete, and vice versa:
export class myComponent extends WjFlexGridParent implements OnChanges, OnInit {
/////// deleted property //////
////// *ngIf only likes to read this after the last time it is defined //////
public deleted: boolean;
loadData() {
this.myDatabaseService.get(this.myApiPath)
.subscribe
(
data => {
this.setCollectionView(data);
this.m_collectionView.trackChanges = true;
/////// delete/undelete logic //////
for (var i = 0; i < data.length; i++) {
if (data[i].deleted == null) {
this.deleted = false;
}
else if (data[i].deleted !== null) {
this.deleted = true;
}
}
},
errorCode => {
// this.statusMessage = "";
}
);
}
}
Is there a way to make *ngIf recognize this property after each update?