5

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>

该应用程序因错误而崩溃

file:///app/tns_modules/nativescript-telerik-ui/listview/listview.js:1034:104: JS ERROR TypeError: undefined is not an object (evalating 'itemViewDimensions.measuredWidth') Feb 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

不确定我是否错过了在某处导入某些东西，但是文档非常粗略，很难确定并查看示例

4

5 回答 5

5

LISTVIEW_DIRECTIVES 用于带有 Javascript 的 Nativescript。

对于 Angular2：

安装插件tns plugin add nativescript-telerik-ui 在此重建后使用 tns run android 以使新插件正常工作。

在module.ts中添加：

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

在同一个文件中：

在@NgModule导入中添加：NativeScriptUIListViewModule，

它会准备好的。

于 2017-03-05T07:39:54.443 回答
1

这是我如何让它工作的。

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

app/shared/shared-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 {}
  1. 在您拥有的任何使用 RadListView 的功能/子模块中导入此共享指令模块。

这是一个例子。

应用程序/事件/事件.module.ts

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

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

应用程序/事件/事件.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>
于 2017-02-26T15:39:48.310 回答
1

您需要设置列表的高度，默认高度为 0px；

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

于 2018-11-07T18:43:10.287 回答
0

我不确定它是必需的，但我有RadListView一个项目，也有ListViewLinearLayout它的一个孩子：

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

您是否还添加到应用程序模块LISTVIEW_DIRECTIVES的列表中？declarations

于 2017-02-05T15:52:48.750 回答
0

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

于 2017-02-22T20:15:41.630 回答