ListView 可以在 NativeScript 的 SideDrawer 中使用吗？

Question

我需要在 NativeScript 中实现一个 SideDrawer，其中的菜单项可以根据某些条件动态变化。

我决定使用 ListView 来显示菜单条目，因为列表可能很长并且可能需要滚动。

但是，我似乎无法正常工作，也找不到原因。 Angular 的 NativeScript 文档有点不完整，我不确定我是否正确组装了各个部分。

SideDrawer 工作正常，但未显示 ListView。请注意，如果我使用 StackLayout 而不是 ListView 添加元素，则会显示它们。

这是我正在处理的模板：

<ActionBar title="Inline" >
    <NavigationButton [visibility]="hideDrawer || (isAndroid ? 'visible' : 'collapse')" icon="res://ic_menu" (tap)="onDrawerTap()"></NavigationButton>
    <ActionItem [visibility]="hideDrawer || (isAndroid ? 'collapse' : 'visible')" icon="res://ic_menu" ios.position="right" (tap)="onDrawerTap()"></ActionItem>
</ActionBar>

<RadSideDrawer #drawer>

    <StackLayout tkDrawerContent class="sideStackLayout">

        <GridLayout>
            <RadListView [items]="menuEntries" orientation="vertical">
                <template tkListItemTemplate let-item="item">
                    <StackLayout>
                        <Label [text]="item.label"  class="sideLabel"></Label>
                    </StackLayout>
                </template>
            </RadListView>
        </GridLayout>

    </StackLayout>

    <StackLayout tkMainContent>



    </StackLayout>

</RadSideDrawer>

这是组件的代码，我删除了不相关的逻辑：

import * as application from "application";
import { Component, ViewChild, OnInit } from "@angular/core";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular";
import * as applicationSettings from "application-settings";

class MenuEntry {
    constructor(
        public label: string,
        public url: string
    ){}
}

@Component({
    selector: "main-container",
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']

})
export class AppComponent implements OnInit {

    @ViewChild(RadSideDrawerComponent)
    public drawerComponent: RadSideDrawerComponent;
    private drawer: SideDrawerType;
    isAndroid:boolean = application.android !== null;
    hideDrawer = false;
    menuEntries:Array<MenuEntry> = [];

    constructor() {}

    ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;
    }

    public onDrawerTap() {
        this.drawer.toggleDrawerState();
    }

    public closeDrawer(){
        this.drawer.closeDrawer();
    }

    ngOnInit(){
        this.generateMenu();
    }

    private generateMenu(): void {
        this.menuEntries.push(
            new MenuEntry("LABEL1", "/place1"),
            new MenuEntry("LABEL2", "/place2")
        );
    }


}

我正在使用：

本机脚本：2.2.1
nativescript-angular: 0.3.1
nativescript-telerik-ui: 1.3.1

有什么建议吗？

谢谢

Answer 1

为了能够同时使用 SideDrawer 和 RadListview 组件，您应该首先在 app.module.ts 文件的导入中添加 NativeScriptUISideDrawerModule 和 NativeScriptUIListViewModule。有关如何在 SideDrawer 中使用 ListView 的更多信息，请查看下面的示例。

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";

import { ItemService } from "./item/item.service";
import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";
import { NativeScriptUIListViewModule } from "nativescript-telerik-ui-pro/listview/angular";
import { NativeScriptUISideDrawerModule } from "nativescript-telerik-ui-pro/sidedrawer/angular";
@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptUIListViewModule,
        NativeScriptUISideDrawerModule
    ],
    declarations: [
        AppComponent,
        ItemsComponent,
        ItemDetailComponent
    ],
    providers: [
        ItemService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

items.component.html

<GridLayout rows="" columns="">
<RadSideDrawer #drawer>
    <StackLayout tkDrawerContent class="sideStackLayout" backgroundColor="red">
        <StackLayout class="sideTitleStackLayout" >
            <Label text="Navigation Menu"></Label>
        </StackLayout>
        <GridLayout class="sideStackLayout">
            <RadListView [items]="myItems" heigh="400">
                <ng-template tkListItemTemplate let-item="item" let-i="index" let-odd="odd" let-even="even">
                    <StackLayout  orientation="vertical">
                        <Label [text]='"index: " + i'></Label>
                        <Label [text]='"[" + item.id +"] " + item.name'></Label>
                    </StackLayout>
                </ng-template>
            </RadListView>
        </GridLayout>
    </StackLayout>
    <StackLayout tkMainContent>
        <Label text="Main page" textWrap="true" class="drawerContentText"></Label>
    </StackLayout>
</RadSideDrawer>
</GridLayout>

items.component.ts

import { Component, ElementRef, ViewChild, Injectable, AfterViewInit, OnInit, ChangeDetectorRef } from "@angular/core";


class DataItem{
    constructor(public id:number, public name:string){}
}

import { Item } from "./item";
import { ItemService } from "./item.service";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent{
    public myItems: Array<DataItem>;
    private counter: number;

    constructor() {
        this.myItems = [];
        this.counter = 0;
        for (var i = 0; i < 50; i++) {
            this.myItems.push(new DataItem(i, "data item " + i));
            this.counter = i;
        }
    }
}

ListView 可以在 NativeScript 的 SideDrawer 中使用吗？

Can a ListView be used within a SideDrawer in NativeScript?

listview

navigation-drawer

nativescript

angular2-nativescript

nativescript-telerik-ui