How to hide some row item in listview with angular2 nativescript

Issue

I need to remove/hide an item from the listview if a condition is met: both the getData and getCategory Name are equal.
I tested in console log, for the first three items the above two conditions are equal.

So based on that I need to hide the item.I tried below code.it doesn’t worked for me.

Edited:

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>

I’m using modal custom dialog screen.When coming back from modal dialog, its triggering below code:

ts file:

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


    });

when clicking on the image I’m triggering showmodel dialog. When getting response from modal dialog, it will trigger this line : this.modal.showModal(ModalComponent, options).then(res =>.

My issue is : When clicking on the modal dialog is not triggering. Because I have added SetUpItemViewArgs in this method : public showModal(args: SetupItemViewArgs)

Solution

Solution 1: Using Observable

This solution is by using an BehaviorSubject (type of observable) and the async pipe, and by removing the row item you want to hide in the array. The whole list will be updated everytime you change the value in the subject.

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]);
}

your view:

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

Solution 2: Js/ts simple logic

(hide some row/remove some item, after an action)

You need to store in an array variable the statement of an item if it should be hide or visible.

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();
}

Now in your html, nothing to change:

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

Note: you may use ChangeDetectorRef to update view

Answered By – Fetrarij

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.