*ngIf - reference a property which needs to be set more than once

Question

On Angular 6, I've got a WIJMO grid on my template. This grid pulls from a database table. Each row of the grid should have either a delete button or an un-delete button, depending on *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>

My problem lies with setting this deleted property in the .ts file. I need to set and read this property multiple times AKA for every row of the table - but *ngIf only wants to use it after the last time it is defined. So for my typescript, which uses a for loop on every data item and sets deleted property to true or false based on a database column, if the last row of the grid is marked as deleted in the database, then all the buttons will show 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 = "";
                }
            }
            );
    }

}

How can I get *ngIf to read this property after every time it is updated?

Answer 1

Solved - only one small line of code needed to be changed in the HTML, and the for loop in the .ts file can be completely removed.

Special thanks to Jeto and Aragorn in the comments section who pointed me in the right direction, and Sharad from GrapeCity (WIJMO) support for the final answer.

For all you WIJMO FlexGrid people, I just bound *ngIf to my items.deleted attribute in the html (similar to what Aragorn suggested when he wrote: 'It looks like the data you are getting already has the deleted attribute, just use that.').

HTML:

    <wj-flex-grid-column [header]="'delete/undelete buttons'" [binding]="'buttons'">

        //// set *ngIf="!item.deleted" ////
        <button *ngIf="!item.deleted; else unDeleted">Delete</button>
            <ng-template #unDeleted>
                <button>Un-Delete</button>
            </ng-template>

    </wj-flex-grid-column>

TS:

loadData() {
    var self = this;

    this.myDatabaseService.get(this.myApiPath)
        .subscribe
        (
            data => {
                this.setCollectionView(data);
                this.m_collectionView.trackChanges = true;

                //// for loop was not needed ////
            },
            errorCode => {
                // this.statusMessage = "";
            }
        );
}