禁用 ListView 中的项目

Question

我有一个使用 NativeScript 编写的应用程序 Angular 2。其中我有一个列表视图，如下所示：

     <ListView row="1" [items]="items" (itemTap)="onNavigationItemTap($event)" class="root-drawer-content">
         <ng-template let-item="item">
             <StackLayout class="root-item-stack-layout">
                 <Label [text]="item.title" textWrap="true" class="btn btn-primary" [class.btn-active]="item.enabled"></Label>
                 <StackLayout height="1" class="root-drawer-content"></StackLayout>
             </StackLayout>
         </ng-template>
     </ListView>

如何强制禁用特定项目？在视觉和行为方面。

Answer 1

你快到了。当您使用 item.enabled 属性选择 btn-active class 时，您可以将相同的逻辑应用于禁用（您的自定义逻辑，例如将背景颜色更改为灰色以显示禁用）到 StackLayout。

<ng-template let-item="item">
             <StackLayout class="root-item-stack-layout" [class.enabled]="item.enabled">
                 <Label [text]="item.title" textWrap="true" class="btn btn-primary" [class.btn-active]="item.enabled"></Label>
                 <StackLayout height="1" class="root-drawer-content"></StackLayout>
             </StackLayout>
         </ng-template>

对于功能，您可以在管理 itemTap 的 .ts 文件中进行处理。 (itemTap)="onNavigationItemTap($event)"

public onNavigationItemTap(args) {

        const currentItemView = args.view;
        const item = currentItemView.bindingContext;
if(item.enabled){
// do your stuff
}

禁用 ListView 中的项目

Disable item in ListView

angular2-nativescript