angular - How to hide some row item in listview with angular2 nativescript -
i need remove/hide item listview if condition met: both getdata , getcategory name equal. tested in console log, first 3 items above 2 conditions equal.
so based on need hide item.i tried below code.it doesn't worked 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 modal dialog, 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 = 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 image i'm triggering showmodel dialog. when getting response modal dialog, trigger line : this.modal.showmodal(modalcomponent, options).then(res =>.
my issue : when clicking on modal dialog not triggering. because have added setupitemviewargs in method : public showmodal(args: setupitemviewargs)
solution 1: using observable
this solution using behaviorsubject (type of observable) , async pipe, , removing row item want hide in array. whole list updated everytime change value in subject.
import {behaviorsubject} "rxjs/behaviorsubject"; ... public items$: behaviorsubject<array<any>> = new behaviorsubject([]); constructor() { //may it's not in constructor after got allfeeditems this.items$.next(this.allfeeditems); } public hidesomerow() { (let = 0; < this.allfeeditems.length; i++) { let barcategory = statusbar.categoryarr[i]; let datacategory = this.allfeeditems[i].category; if (barcategory === datacategory) { // remove item array this.allfeeditems.splice(i, 1); } } //update 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 row/remove item, after action)
you need store in array variable statement of item if should hide or visible.
public isvisible: array<boolean> = []; public hidesomerow() { (let = 0; < this.allfeeditems.length; i++) { let barcategory = statusbar.categoryarr[i]; let datacategory = this.allfeeditems[i].category; if (barcategory === datacategory) { // remove item array this.allfeeditems.splice(i, 1); } } this._changedetectorref.markforcheck(); } now in html, nothing 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: may use changedetectorref update view
Comments
Post a Comment