如何使用 angular2 nativescript 在列表视图中隐藏某些行项目
How to hide some row item in listview with angular2 nativescript
如果满足条件,我需要 remove/hide 列表视图中的一个项目:getData 和 getCategory 名称都相等。
我在控制台日志中测试,对于前三项,上述两个条件是相等的。
因此,基于此我需要隐藏 item.I 下面尝试的 code.it 对我不起作用。
已编辑:
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>
我正在使用模态自定义对话框 screen.When 从模态对话框返回,其触发代码如下:
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)
解决方案 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简单逻辑
(隐藏一些 row/remove 一些项目,在一个动作之后)
您需要在数组变量中存储项目的声明,如果它应该隐藏或可见。
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>
Note: you may use ChangeDetectorRef to update view
如果满足条件,我需要 remove/hide 列表视图中的一个项目:getData 和 getCategory 名称都相等。 我在控制台日志中测试,对于前三项,上述两个条件是相等的。
因此,基于此我需要隐藏 item.I 下面尝试的 code.it 对我不起作用。
已编辑:
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>
我正在使用模态自定义对话框 screen.When 从模态对话框返回,其触发代码如下:
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)
解决方案 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简单逻辑
(隐藏一些 row/remove 一些项目,在一个动作之后)
您需要在数组变量中存储项目的声明,如果它应该隐藏或可见。
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>
Note: you may use ChangeDetectorRef to update view