如何使用 angular2 nativescript 在列表视图中隐藏某些行项

Question

如果满足条件，我需要从列表视图中删除/隐藏一个项目：getData 和 getCategory Name 都相等。 我在控制台日志中测试过，前三项以上两个条件是相等的。

因此，基于此我需要隐藏该项目。我尝试了下面的代码。它对我不起作用。

已编辑：

html：

<GridLayout >
    <ListView (setupItemView)="onSetupItemView($event)" [items]="allFeedItems" class="list-group">
        <ng-template let-item="item" let-visible="visible">
            <StackLayout [visibility]="visible ? 'visible' : 'collapsed'" class="card-view" margin="10">

            <StackLayout>

                <StackLayout orientation="horizontal">
                    <Image src={{item.iconName}} stretch="none" class="item-icon"></Image>
                    <Label class="item-category" [text]="item.category"></Label>
                </StackLayout>
                <StackLayout orientation="horizontal">
                    <Label class="item-time" text="4 hours ago"></Label>
                </StackLayout>
                <StackLayout orientation="vertical">
                    <Image src={{item.imageUrl}} stretch="aspectFill" width="100%" height="50%" class="item-image"></Image>
                    <Label class="item-title" [text]="item.title" textWrap="true"></Label>
                </StackLayout>

            </StackLayout>

            </StackLayout>
        </ng-template>
    </ListView>     


    <Image src="res://pref_circle" (setupItemView)="showModal($event)" verticalAlignment="bottom" horizontalAlignment="right" minWidth="45"  height ="45" ></Image>

我正在使用模态自定义对话框屏幕。当从模态对话框返回时，其触发代码如下：

ts 文件：

    public showModal(args: SetupItemViewArgs) {
    let options = {
        context: {},
        fullscreen: true,
        viewContainerRef: this.vcRef
    };

    this.modal.showModal(ModalComponent, options).then(res => {
        console.log("Res:", res);

        console.log("PrintCategory2", StatusBar.categoryArr);

        let i = args.index;
        let barCategory = StatusBar.categoryArr[i];
        let dataCategory = this.allFeedItems[i].category;

        if (barCategory === dataCategory) {
            args.view.context.visible = false;
        } else {
            args.view.context.visible = true;
        }


    });

点击图片时，我会触发 showmodel 对话框。当从模态对话框获得响应时，它将触发这一行：this.modal.showModal(ModalComponent, options).then(res =>。

我的问题是：单击模态对话框时未触发。因为我在这个方法中添加了 SetUpItemViewArgs ：public showModal(args: SetupItemViewArgs)

Answer 1

解决方案 1：使用 Observable

此解决方案是使用BehaviorSubject（可观察类型）和async 管道，并删除要隐藏在数组中的行项目。每次更改主题中的值时，都会更新整个列表。

import {BehaviorSubject} from "rxjs/BehaviorSubject";

...

public items$: BehaviorSubject<Array<any>> = new BehaviorSubject([]);
constructor() {
    //may be it's not in constructor but after you got allFeedItems
    this.items$.next(this.allFeedItems);
}
public hideSomeRow() {
    for (let i = 0; i < this.allFeedItems.length; i++) {
        let barCategory = StatusBar.categoryArr[i];
        let dataCategory = this.allFeedItems[i].category;

        if (barCategory === dataCategory) {
            // remove the item from array 
            this.allFeedItems.splice(i, 1);
        }
    }
    //update to the new value
    this.items$.next([...this.allFeedItems]);
}

你的看法：

<ListView [items]="items$ | async" class="list-group">
    <ng-template let-item="item" let-index="index">
        <StackLayout class="card-view" margin="10">

        <StackLayout>

            <StackLayout orientation="horizontal">
                <Image src={{item.iconName}} stretch="none" class="item-icon"></Image>
                <Label class="item-category" [text]="item.category"></Label>
            </StackLayout>

            <StackLayout orientation="horizontal">
                <Label class="item-time" text="4 hours ago"></Label>
            </StackLayout>

            <StackLayout orientation="vertical">
                <Image src={{item.imageUrl}} stretch="aspectFill" width="100%" height="50%" class="item-image"></Image>
                <Label class="item-title" [text]="item.title" textWrap="true"></Label>

            </StackLayout>

        </StackLayout>

        </StackLayout>
    </ng-template>
</ListView>    
<Image (tap)="hideSomeRow()" ... class="item-image"></Image>

---

方案二：Js/ts简单逻辑

（隐藏某行/删除某项，操作后）

如果项目应该隐藏或可见，您需要将项目的声明存储在数组变量中。

public isVisible: Array<boolean> = [];
public hideSomeRow() {
    for (let i = 0; i < this.allFeedItems.length; i++) {
        let barCategory = StatusBar.categoryArr[i];
        let dataCategory = this.allFeedItems[i].category;

        if (barCategory === dataCategory) {
            // remove the item from array 
            this.allFeedItems.splice(i, 1);
        }
    }
    this._changeDetectorRef.markForCheck();
}

现在在您的 html 中，无需更改：

<ListView [items]="allFeedItems" class="list-group">
    <ng-template let-item="item" let-index="index">
        <StackLayout class="card-view" margin="10">

        <StackLayout>

            <StackLayout orientation="horizontal">
                <Image src={{item.iconName}} stretch="none" class="item-icon"></Image>
                <Label class="item-category" [text]="item.category"></Label>
            </StackLayout>

            <StackLayout orientation="horizontal">
                <Label class="item-time" text="4 hours ago"></Label>
            </StackLayout>

            <StackLayout orientation="vertical">
                <Image src={{item.imageUrl}} stretch="aspectFill" width="100%" height="50%" class="item-image"></Image>
                <Label class="item-title" [text]="item.title" textWrap="true"></Label>

            </StackLayout>

        </StackLayout>

        </StackLayout>
    </ng-template>
</ListView>    
<Image (tap)="hideSomeRow()" ... class="item-image"></Image>

注意：您可以使用 ChangeDetectorRef 来更新视图