NativeScriptのSideDrawer内でListViewを使用できますか？

Question

NativeScriptにSideDrawerを実装する必要があります。メニューエントリは、状況によっては動的に変更される可能性があります。

リストが長くなる可能性があり、スクロールが必要になる可能性があるため、ListViewを使用してメニュー項目を表示することにしました。

しかし、私はそれを動作させるように見えないので、理由を見つけることができません。 NativeScript for Angularのドキュメントは少し不完全であり、正しく組み立てているかどうかはわかりません。

SideDrawerは正しく機能していますが、ListViewは表示されません。 ListViewの代わりにStackLayoutを使用して要素を追加すると、それらが表示されます。

この

は、私が働いているテンプレートです：私が使用している

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") 
     ); 
    } 


} 

：

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

と、これはコンポーネントのコードですが、私は非関連のロジックを削除しました

• nativescript：2.2.1
• nativescript-角度：0.3.1
• nativescript-telerik-UI：1.3.1

任意の提案ですか？

おかげ

Answer 1

は、あなたが最初のapp.module.tsファイルにインポートにNativeScriptUISideDrawerModuleとNativeScriptUIListViewModuleを追加する必要があります両方SideDrawerとRadListviewコンポーネントを使用できるようにするには。 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 { } 

<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.html 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; 
     } 
    } 
}