Question

我设法添加一个TextField来过滤用户输入的RadListView。我的问题是，当没有与用户搜索匹配的内容时，我试图显示“未找到结果”消息。根据名称和日期进行过滤。

这是我的TextField代码。

*ngFor=""

这是我的ts文件。我主要包括了过滤的一部分。

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

感谢您的协助。

Answer 1

较早地解决了此问题，并设法以某种方式使其工作代替字符串，使isItemVisible为布尔值，并根据该布尔值更改可见性。还可以确保它正在击中else循环吗？

<Label row="0" [visibility]="isItemVisible ? 'visible' : 'collapse'" class="text-center text-maroon" text="No results found"></Label>

在nativescript radlistview过滤中显示自定义消息

1 个答案: