代码之家 › 专栏 › 技术社区 › Kyle Vassella

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

wijmo angular-ng-if angular6 typescript angular

0

Kyle Vassella · 技术社区 · 6 年前

论 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文件中的属性。我需要为表的每一行多次设置和读取这个属性,也就是说, *ngIf 只想在上次定义之后使用它。所以对于我的字体脚本,它使用 for loop 在每个数据项和集合上 删除 基于数据库列将属性设置为“真”或“假”,如果网格的最后一行在数据库中标记为“已删除”,则所有按钮都将显示 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 每次更新后读取此属性?

1 回复 | 直到 6 年前

1

0

Kyle Vassella 6 年前

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

特别感谢杰托和阿拉贡在评论部分指出了我的正确方向,以及来自葡萄柚城(wijmo)的sharad对最终答案的支持。

为了你 WIJMO FlexGrid 伙计们,我刚出发 *ngIf 对我 items.deleted HTML中的属性(类似于Aragron在编写时提出的建议: '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 = "";
            }
        );
}