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

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 читать это свойство после каждого его обновления?


typescript angular angular6 wijmo angular-ng-if
person Kyle Vassella    schedule 28.11.2018    source источник
comment
Вы делаете *ngFor для создания строк? Я не уверен, что полностью понимаю, но вам нужен массив флагов удаления, по одному для каждой строки.   -  person Aragorn    schedule 28.11.2018
comment
Я не использую *ngFor — WIJMO использует одну строку кода для генерации строк, которые я исключил выше. Похоже, что *ngIf считывает свойство deleted только после завершения for loop. Таким образом, независимо от того, что последняя строка устанавливает для свойства deleted, это то, что *ngIf использует для каждой строки.   -  person Kyle Vassella    schedule 28.11.2018
comment
Ваш цикл не имеет особого смысла. Вы перебираете весь массив, но перезаписываете this.deleted на каждой итерации. Что именно должно содержать это значение?   -  person Jeto    schedule 28.11.2018
comment
Я надеялся, что *ngIf будет читать свойство на каждой итерации. Свойство deleted является логическим значением — true или false. Мы никогда на самом деле не удаляем строки из нашей базы данных — вместо этого мы помечаем столбец базы данных Deleted либо цифрой null (не удалено), либо числом ID (удалено). Таким образом, если администратору нужно «восстановить» строку, он может это сделать.   -  person Kyle Vassella    schedule 28.11.2018
comment
Похоже, что данные, которые вы получаете, уже имеют удаленный атрибут, просто используйте его, поместите часть кода, которая создает строки, я опубликую ответ на основе этого.   -  person Aragorn    schedule 28.11.2018
comment
Я не думаю, что это вам сильно поможет, так как это делает магия фреймворка WIJMO. Я включил его выше, но это: this.setCollectionView(data);. Это происходит от родительского класса. setCollectionView определяется в родительском классе как: setCollectionView(p_data) { this.m_collectionView = new wjcCore.CollectionView(p_data); }   -  person Kyle Vassella    schedule 28.11.2018
comment
@Aragorn Возможно, вам повезет больше, если вы посмотрите на мой HTML. WIJMO привязывается к строке базы данных через атрибут [binding].   -  person Kyle Vassella    schedule 28.11.2018
comment
@Aragorn Мне было бы очень интересно посмотреть, как *ngIf сможет привязываться к свойству / ключу .deleted каждой строки data. data[i].deleted в данном случае — это значение столбца Deleted в базе данных.   -  person Kyle Vassella    schedule 28.11.2018
comment
@Jeto Я ответил тебе выше, кстати... твой комментарий имеет смысл. Я просто не знаю, как изменить это, чтобы *ngIf мог читать свойство каждый раз, когда оно перезаписывается. Возможно, мне нужно переместить свойство или вообще не использовать *ngIf?   -  person Kyle Vassella    schedule 28.11.2018

Ответы (1)


arrow_upward
0
arrow_downward

Решено - нужно было изменить только одну небольшую строку кода в 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 = "";
            }
        );
}
person Kyle Vassella    schedule 29.11.2018