Question

TNS v2.5.0

我已将LISTVIEW_DIRECTIVES导入我的app.module，我的模板看起来像

<ActionBar title="Events"></ActionBar>
<StackLayout orientation="vertical">
    <RadListView [items]="events">
        <template tkListItemTemplate let-event="item">
            <StackLayout orientation="vertical">
            <Image [src]="'https:' + event.image" stretch="aspectFit"></Image>
            <Label [nsRouterLink]="['/event', event.id]" [text]="event.title"></Label>
            </StackLayout>
        </template>
    </RadListView>
</StackLayout>

但这只显示正常ListView正常工作。

此外，如果我尝试GridLayout喜欢

<ActionBar title="Events"></ActionBar>
<GridLayout>
    <RadListView [items]="events">
        <template tkListItemTemplate let-event="item">
            <StackLayout orientation="vertical">
            <Image [src]="'https:' + event.image" stretch="aspectFit"></Image>
            <Label [nsRouterLink]="['/event', event.id]" [text]="event.title"></Label>
            </StackLayout>
        </template>
    </RadListView>
</GridLayout>

该应用程序因

错误而崩溃

文件：///app/tns_modules/nativescript-telerik-ui/listview/listview.js：1034：104： JS ERROR TypeError：undefined不是对象（评估 'itemViewDimensions.measuredWidth'）2月5日11:40:53 Marcuss-iMac com.apple.CoreSimulator.SimDevice.1A8C1E25-DAC0-4BA0-822E-5A6F731F1CD7.launchd_sim [31919] （UIKitApplication：org.nativescript.t4g [0x7b2a] [36194]）：退出服务由于分段错误：11

不确定我是否错过了在某处导入的内容，但文档非常粗略，因此难以确定并查看示例

Answer 1

LISTVIEW_DIRECTIVES适用于使用Javascript的Nativescript。

对于Angular2：

安装插件 tns插件添加nativescript-telerik-ui 在此重建之后，使用tns运行android以获得新的插件。

在 module.ts 中添加：

从“nativescript-telerik-ui / listview / angular”导入{NativeScriptUIListViewModule};

并在同一个文件中：

@NgModule 导入中的

添加： NativeScriptUIListViewModule，

它会准备就绪。

Answer 2

以下是我如何使用它。

创建一个共享指令模块，并且只在那里定义RadListView指令。

应用程序/共享/共享directives.module.ts

import {NgModule} from "@angular/core";   
import {LISTVIEW_DIRECTIVES} from "nativescript-telerik-ui/listview/angular";

@NgModule({
  declarations: [
    LISTVIEW_DIRECTIVES
],
exports: [
    LISTVIEW_DIRECTIVES
]
})
export class SharedDirectivesModule {}

在您使用RadListView的任何功能/子模块中导入此共享指令模块。

这是一个例子。

应用/活动/ events.module.ts

import {SharedDirectivesModule} from "../shared/shared-directives.module";
...

@NgModule({
imports: [
    ...
    SharedDirectivesModule,
    ...
],
...
})
export class EventsModule {}

应用/活动/ events.component.html

<GridLayout>
  <RadListView [items]="events">
    <template tkListItemTemplate let-event="item">
        <StackLayout orientation="vertical">
        <Image [src]="'https:' + event.image" stretch="aspectFit"></Image>
        <Label [nsRouterLink]="['/event', event.id]" [text]="event.title"></Label>
        </StackLayout>
    </template>
  </RadListView>
</GridLayout>

Answer 3

我不确定是否需要，但我在项目中有RadListView并且还有ListViewLinearLayout作为其中一个孩子：

<RadListView [items]="listViewItems">
  <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical"></ListViewLinearLayout>
  <template tkListItemTemplate let-item="item">
    <YourStuff></YourStuff>
  </template>
</RadListView>

您是否还在应用模块的LISTVIEW_DIRECTIVES列表中添加了declarations？

Answer 4

我遇到了同样的问题。我在应用程序模块中导入并声明了LISTVIEW_DIRECTIVES。包含ListView的组件在子模块中声明。当我将LISTVIEW_DIRECTIVES的decalaration移动到子模块时，错误就消失了。

Answer 5

您需要设置列表的高度，默认情况下高度为0px;

<RadListView [items]="dataItems" height="300">

获取Nativescript Telerik UI RadListView在Angular中工作

5 个答案: