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>

解决方案2：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更新视图

如何使用angular2 nativescript隐藏listview中的某些行项

1 个答案:

解决方案1：使用Observable

解决方案2：Js / ts简单逻辑