How to hide some row item in listview with angular2 nativescript

Question

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 :

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)

Fetrarij · Accepted Answer

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

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 = [];
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:

Note: you may use ChangeDetectorRef to update view

How to hide some row item in listview with angular2 nativescript

Answers (1)

Solution 1: Using Observable

Solution 2: Js/ts simple logic

Related Questions