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>

我的问题在于在.ts文件中设置此deleted属性。我需要为表的每一行多次设置和读取此属性，但*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撰写时的建议：{{1 }}）。

HTML：

'It looks like the data you are getting already has the deleted attribute, just use that.'

TS：

    <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>

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

1 个答案: