* ngIf - ссылка на свойство, которое необходимо установить более одного раза

Question

На Angular 6, у меня есть сетка WIJMO на моем шаблоне.Эта сетка извлекается из таблицы базы данных.В каждой строке сетки должна быть либо кнопка 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>

Моя проблема заключается в установке этого свойства deleted в файле .ts,Мне нужно установить и прочитать это свойство несколько раз AKA для каждой строки таблицы - но *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, и for loop в файле .ts можно полностью удалить.

Особая благодарность Джето и Арагорну в разделе комментариевкоторый указал мне правильное направление, и Шарад из GrapeCity (WIJMO) поддержал окончательный ответ.

Для всех вас WIJMO FlexGrid людей, я просто связал *ngIf с моим items.deleted атрибутомв HTML (похоже на то, что Арагорн предложил, когда писал: '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 = "";
            }
        );
}