*ngIf - 引用需要多次设置的 属性

Question

在 Angular 6，我的模板上有一个 WIJMO 网格。该网格来自数据库 table。网格的每一行都应该有一个 delete 按钮或一个 un-delete 按钮，具体取决于 *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>

我的问题在于在 .ts 文件中设置此 deleted 属性。我需要为 table 的每一行多次设置和读取此 属性 - 但 *ngIf 只想在最后一次定义后使用它。 所以对于我的打字稿，它在每个数据项上使用 for loop 并根据数据库列将 deleted 属性 设置为 true 或 false，如果网格的最后一行被标记为已删除在数据库中，则所有按钮将显示 undelete，反之亦然：

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 = "";
                }
            }
            );
    }

}

每次更新后如何让*ngIf阅读这个属性？

Answer 1

已解决 - HTML中只需要更改一小行代码，.ts文件中的for loop可以完全删除。

特别感谢评论部分的 Jeto 和 Aragorn 为我指明了正确的方向，以及来自 GrapeCity (WIJMO) 的 Sharad 对最终答案的支持。

各位 WIJMO FlexGrid 人，我只是将 *ngIf 绑定到 html 中我的 items.deleted 属性（类似于 Aragorn 在他写道：'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 = "";
            }
        );
}