在 NativeScript 中使用 angular2 过滤 ListView [英] Filter ListView using angular2 in NativeScript
本文介绍了在 NativeScript 中使用 angular2 过滤 ListView的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 nativescript 和 angular2 的新手.我想使用用户输入的文本字段输入过滤列表视图.在 Angular 版本 1 中，我们曾经这样做过
<div ng-repeat="x in items | filter : userinput">我如何在 nativescript 中使用 angular2 来做到这一点?
我的列表视图是:
<模板 let-item="item"><堆栈布局><Label [text]='item.Department' class="list-group-item"></Label></StackLayout></ListView> 在我的组件中:
export class someComponent {public myItem: Array;公共 isLoading:布尔值；公共构造函数(私有http:Http){this.myItem = [];this.isLoading = true;}公共 ngOnInit(){this.http.get("some_api_url").map(result => result.json()).do(result => console.log(JSON.stringify(result))).订阅(结果 => {this.myItem = 结果；this.isLoading = false;}, 错误 =>{console.log("错误:", 错误);});}} 解决方案
当数据量很大时，nativescript ui listview 过滤很慢，并且它确实删除"了不匹配项.我更改了一些代码以使其快速并且仅显示过滤后的数据.:)快乐编码:)
Page class="page"><StackLayoutorientation="垂直"><GridLayout rows="auto,auto,*,auto"><StackLayout class="form" row="0"orientation="horizontal" width="100%"><TextField 提示="搜索..." class="input"id="搜索字符串"[(ngModel)]="searchstr"width="80%"></TextField><Button class="btn-sm btn-primary btn-active"id="btnSearch"(tap)="onSearchTap($event)"宽度="20%" 高度="40" ><格式化字符串><Span [text]="iconval" class="icon"></Span></FormattedString></按钮></StackLayout><StackLayout row="1"orientation="horizontal" width="100%" backgroundcolor="black"><Label text="CODE" width="25%" class="caption"></Label><Label text="NAME" width="75%" class="caption"></Label></StackLayout><ScrollView row="2" tkExampleTitle tkToggleNavButton><RadListView [items]="dataItems"(itemLoading)="onItemLoading($event)"><ListViewLinearLayouttkListViewLayout scrollDirection="垂直"itemInsertAnimation="幻灯片"itemDeleteAnimation="Slide"></ListViewLinearLayout><ng-template tkListItemTemplate let-item="item" let-i="index" let-odd="odd" let-even="even"><StackLayout class="list-item"(tap)="onItemTap(item)"方向=水平"宽度=100%"><Label [text]="item.custCode" width="25%"></Label><Label [text]="item.custName" width="75%"></Label></StackLayout></ng-模板></RadListView></滚动视图></GridLayout></StackLayout></页面>从@angular/core"导入 { Component, OnInit };从'nativescript-ui-listview'导入{ ListViewEventData };从'tns-core-modules/color/color'导入{颜色}；从 '~/app/core/services' 导入 { APIService };从 'rxjs' 导入 { Observable };从'~/app/core/model'导入{CustProfileLight}；从 'tns-core-modules/data/observable-array/observable-array' 导入 { ObservableArray };@成分({选择器: 'ns-customer-lookup',templateUrl: './customer-lookup.component.html',styleUrls: ['./customer-lookup.component.css'],模块 ID:module.id，})导出类 CustomerLookupComponent 实现 OnInit {私有_dataItems:ObservableArray；customer$:Observable图标:字符串；搜索:字符串；搜索字符串:字符串；项目:任何；//私有_myFilteringFunc: (item: any) =>任何;构造函数(私有服务:APIService){}ngOnInit() {this.iconval = String.fromCharCode(0xe986);this.serv.getCustomer().subscribe(resp=>{this.items = resp;this._dataItems = new ObservableArray(resp);})}get dataItems(): ObservableArray{返回 this._dataItems;}onItemLoading(args: ListViewEventData){if (args.index % 2 === 0) {args.view.backgroundColor = new Color("#b3ecff");}}onItemTap(项目){}onSearchTap(e){const key = this.searchstr;控制台日志(键)；让数据= this.items.filter(item=>item.custCode.includes(key) ||item.custName.includes(key) ||item.address1.includes(key) ||item.address2.includes(key) ||item.address3.includes(key) ||item.address4.includes(key) ||item.city.includes(key) ||item.state.includes(key) ||item.postalCode.includes(key) ||item.tel.includes(key) ||item.fax.includes(key) ||item.contactPerson.includes(key));this._dataItems = new ObservableArray(data);}//get FilteringFunc(): (item: any) =>任何 {//返回 this._myFilteringFunc;//}//设置 FilteringFunc(value: (item: any) => any) {//this._myFilteringFunc = value;//}} I am new to nativescript and angular2. I want to filter listview using textfield input entered by user. in angular version 1, we used to do it like
<input type="text" ng-model="userinput">
<div ng-repeat="x in items | filter : userinput">
</div>
how can i do this using angular2 in nativescript?
my listview is:
<ListView [items]="myItems" class="list-group">
<template let-item="item">
<StackLayout>
<Label [text]='item.Department' class="list-group-item"></Label>
</StackLayout>
</template>
</ListView>
and in my component:
export class someComponent {
public myItem: Array<any>;
public isLoading: boolean;
public constructor(private http: Http) {
this.myItem = [];
this.isLoading = true;
}
public ngOnInit()
{
this.http.get("some_api_url")
.map(result => result.json())
.do(result => console.log(JSON.stringify(result)))
.subscribe(result => {
this.myItem = result;
this.isLoading = false;
}, error => {
console.log("ERROR: ", error);
});
}
}
解决方案
The nativescript ui listview filtering is slow when the data is huge and it does "remove" the no match item. I change a bit code to make it fast and only show filtered data. :) happy coding :)
Page class="page">
<StackLayout orientation="vertical">
<GridLayout rows="auto,auto,*,auto">
<StackLayout class="form" row="0" orientation="horizontal" width="100%">
<TextField hint="Search..." class="input"
id= "searchstr"
[(ngModel)]="searchstr"
width="80%"></TextField>
<Button class="btn-sm btn-primary btn-active"
id="btnSearch"
(tap)="onSearchTap($event)"
width="20%" height="40" >
<FormattedString>
<Span [text]="iconval" class="icon"></Span>
</FormattedString>
</Button>
</StackLayout>
<StackLayout row="1" orientation="horizontal" width="100%" backgroundcolor="black">
<Label text="CODE" width="25%" class="caption"></Label>
<Label text="NAME" width="75%" class="caption"></Label>
</StackLayout>
<ScrollView row="2" tkExampleTitle tkToggleNavButton>
<RadListView [items]="dataItems"
(itemLoading)="onItemLoading($event)">
<ListViewLinearLayout
tkListViewLayout scrollDirection="Vertical"
itemInsertAnimation="Slide"
itemDeleteAnimation="Slide"></ListViewLinearLayout>
<ng-template tkListItemTemplate let-item="item" let-i="index" let-odd="odd" let-even="even">
<StackLayout class="list-item"
(tap)="onItemTap(item)"
orientation="horizontal" width="100%">
<Label [text]="item.custCode" width="25%"></Label>
<Label [text]="item.custName" width="75%"></Label>
</StackLayout>
</ng-template>
</RadListView>
</ScrollView>
</GridLayout>
</StackLayout>
</Page>
import { Component, OnInit } from '@angular/core';
import { ListViewEventData } from 'nativescript-ui-listview';
import { Color } from 'tns-core-modules/color/color';
import { APIService } from '~/app/core/services';
import { Observable } from 'rxjs';
import { CustProfileLight } from '~/app/core/model';
import { ObservableArray } from 'tns-core-modules/data/observable-array/observable-array';
@Component({
selector: 'ns-customer-lookup',
templateUrl: './customer-lookup.component.html',
styleUrls: ['./customer-lookup.component.css'],
moduleId: module.id,
})
export class CustomerLookupComponent implements OnInit {
private _dataItems: ObservableArray<CustProfileLight>;
customer$:Observable<CustProfileLight>
iconval:string;
search:string;
searchstr:string;
items:any;
//private _myFilteringFunc: (item: any) => any;
constructor(private serv:APIService) { }
ngOnInit() {
this.iconval = String.fromCharCode(0xe986);
this.serv.getCustomer().subscribe(resp=>{
this.items = resp;
this._dataItems = new ObservableArray<CustProfileLight>(resp);
})
}
get dataItems(): ObservableArray<CustProfileLight> {
return this._dataItems;
}
onItemLoading(args: ListViewEventData){
if (args.index % 2 === 0) {
args.view.backgroundColor = new Color("#b3ecff");
}
}
onItemTap(item){
}
onSearchTap(e){
const key =this.searchstr;
console.log(key);
let data= this.items.filter(item=>item.custCode.includes(key) ||
item.custName.includes(key) ||
item.address1.includes(key) ||
item.address2.includes(key) ||
item.address3.includes(key) ||
item.address4.includes(key) ||
item.city.includes(key) ||
item.state.includes(key) ||
item.postalCode.includes(key) ||
item.tel.includes(key) ||
item.fax.includes(key) ||
item.contactPerson.includes(key)
);
this._dataItems = new ObservableArray<CustProfileLight>(data);
}
// get FilteringFunc(): (item: any) => any {
// return this._myFilteringFunc;
// }
// set FilteringFunc(value: (item: any) => any) {
// this._myFilteringFunc = value;
// }
}
这篇关于在 NativeScript 中使用 angular2 过滤 ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
