nativescript-angular - 在 nativescript radlistview 过滤中显示自定义消息
问题描述
我设法添加了一个 TextField,它在用户键入时过滤 RadListView。我的问题是,当没有任何内容与用户搜索匹配时,我试图显示“未找到结果”消息。我根据姓名和日期进行过滤。
这是我的 TextField 代码。
<GridLayout class="page page-content custom_font_family m-5" rows="50, *">
<StackLayout class="input-field" row="0">
<TextField
hint="search..."
[(ngModel)]='searchPaymentsList'
secure="false"
returnKeyType="done"
(textChange)="onTextChanged($event)"
autocorrect="false"
autocapitalizationType="none"
focus="onFocus"
blur="onBlur"
class="input input-border"
color="navy"
textFieldHintColor="#bfbfbf"></TextField>
</StackLayout>
<GridLayout tkExampleTitle tkToggleNavButton row="1" rows="*">
<RadListView [items]="getWmRDataItems" loadOnDemandMode="Auto" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)" [filteringFunction]="myFilteringFunc" #myListView row="0" selectionBehavior="None" (itemSwipeProgressEnded)="onSwipeCellFinished($event)"
(itemSwipeProgressStarted)="onSwipeCellStarted($event)" (itemSwipeProgressChanged)="onCellSwiping($event)" swipeActions="true">
<ng-template tkListItemTemplate let-item="item" let-i="index" let-odd="odd" let-even="even">
<GridLayout class="list-group-item p-y-10 m-y-2 t-17 p-x-5 listItemStackLayout" rows="*, *, *, *, *, *" columns="130, *" [class.odd]="odd" [class.even]="even">
<Label row="0" col="0" text='Date:' class="font-weight-bold"></Label>
<Label row="0" col="1" [text]='item.wmr_date | date: "d-M-y"' textWrap="true"></Label>
<Label row="1" col="0" text='Tenants Id:' class="font-weight-bold"></Label>
<Label row="1" col="1" [text]='item.tenant_id' textWrap="true"></Label>
<Label row="2" col="0" text='Names:' class="font-weight-bold"></Label>
<Label row="2" col="1" [text]='item.tenant_names' textWrap="true"></Label>
<Label row="3" col="0" text='Reading:' class="font-weight-bold"></Label>
<Label row="3" col="1" [text]='item.wm_reading' textWrap="true"></Label>
<Label row="4" col="0" text='Amount Used:' class="font-weight-bold"></Label>
<Label row="4" col="1" [text]='item.wmr_consumed' textWrap="true"></Label>
<Label row="5" col="0" text='Amount Owed:' class="font-weight-bold"></Label>
<Label row="5" col="1" [text]='item.wmr_unit_cost * item.wmr_consumed | currency:"UG ":"Ug. ": "3.1-1"' textWrap="true"></Label>
</GridLayout>
</ng-template>
<!-- >> angular-listview-swipe-actions-template-html -->
<GridLayout *tkListItemSwipeTemplate columns="auto, *, auto" class="gridLayoutLayout p-y-2 t-17">
<StackLayout id="mark-view" col="0" class="markViewStackLayout" (tap)="onEditSwipeClick($event)">
<Label text="Edit" class="swipetemplateLabel text-white text-center" verticalAlignment="center" horizontalAlignment="center"></Label>
</StackLayout>
<StackLayout id="delete-view" col="2" class="deleteViewStackLayout" (tap)="onDeleteSwipeClick($event)">
<Label text="Delete" class="swipetemplateLabel text-white text-center" verticalAlignment="center" horizontalAlignment="center"></Label>
</StackLayout>
</GridLayout>
<!-- << angular-listview-swipe-actions-template-html -->
<ListViewLinearLayout *tkIfIOS tkListViewLayout itemHeight="120"></ListViewLinearLayout>
<div *tkIfIOS>
<GridLayout *tkListLoadOnDemandTemplate class="loadOnDemandItemGridLayout">
<Label text="Load More" horizontalAlignment="center" verticalAlignment="center"></Label>
</GridLayout>
</div>
</RadListView>
<Label [visibility]="isItemVisible ? 'visible' : 'collapse' " class="text-center text-maroon" text="No results found"></Label>
</GridLayout>
</GridLayout>
这是我的 ts 文件。我主要包括了过滤的部分。
public wmrItems: ObservableArray<AddWmR>;
private _sourceDataItems: ObservableArray<AddWmR>;
private layout: ListViewLinearLayout;
public isItemVisible: string = "hidden";
public searchPaymentsList: string;
private _myFilteringFunc: (item: any) => any;
@ViewChild("myListView") myListViewComponent: RadListViewComponent;
get myFilteringFunc(): (item: any) => any {
return this._myFilteringFunc;
}
set myFilteringFunc(value: (item: any) => any) {
this._myFilteringFunc = value;
}
public onTextChanged(args) {
let searchBar = <TextField>args.object;
let listView = this.myListViewComponent.listView;
let tolowercaseSearch = (searchBar.text).toLowerCase();
this.myFilteringFunc = (item: AddWmR) => {
var TenantNames = item.tenant_names.toLowerCase();
return TenantNames.includes(tolowercaseSearch) || item.wmr_date.includes(searchBar.text);
};
if (!listView.filteringFunction) {
listView.filteringFunction = this.myFilteringFunc;
} else {
listView.filteringFunction = undefined;
this.isItemVisible = "visible"; //-----> not working
}
}
任何帮助表示赞赏。
解决方案
早些时候遇到了这个问题,并以某种方式设法通过以下方式而不是 string make isItemVisible
boolean 使其工作,并根据该布尔值更改可见性。您还可以确保它正在命中 else 循环吗?
<Label row="0" [visibility]="isItemVisible ? 'visible' : 'collapse'" class="text-center text-maroon" text="No results found"></Label>
推荐阅读
- java - Java 程序使用标准值计算平均值(代码)
- elasticsearch - Elasticsearch:如何添加“created_at”和“updated_at”时间戳?
- sql - 如何通过 SQL 中的批处理脚本命令执行 SQL 脚本?
- java - 我如何贴标签
- c# - 无法在 C# 中向 GRID 面板添加不同的控件
- javascript - 我怎样才能在fullcalendar中显示超过标题
- java-9 - 是否可以使用 jvm 模式使用 prunsrv 启动 Java 运行时映像?
- ios - 当应用程序即将被卸载或更新时,Cordova 中是否有事件?
- java - 为什么直接绘制像素比在 BufferedImage 中绘制数据要慢?
- php - 有没有办法重复 li 类“x”次?