让 Nativescript Telerik UI RadListView 在 Angular 中工作答案

【问题标题】：Getting Nativescript Telerik UI RadListView to work in Angular让 Nativescript Telerik UI RadListView 在 Angular 中工作
【发布时间】：2017-06-22 10:49:17
【问题描述】：

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 (evaluate '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

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

【问题讨论】：

试试
没有任何区别
有趣的是来自官方 nativescript-ui 存储库的这个示例 (github.com/telerik/nativescript-ui-samples-angular/blob/release/…) 运行良好并且具有相同的 UI 结构。你可以试试看。
试过了，但仍然给我错误 file:///app/tns_modules/nativescript-telerik-ui/listview/listview.js:1034:104: JS ERROR TypeError: undefined is not an object （评估“itemViewDimensions.measuredWidth”）
在提到的 (github.com/telerik/nativescript-ui-samples-angular) 存储库中使用最新的 2.5.0 版本的 NativeScript 对此进行了测试，没有引发错误。

标签： listview nativescript angular2-nativescript nativescript-telerik-ui

【解决方案1】：

LISTVIEW_DIRECTIVES 用于带有 Javascript 的 Nativescript。

对于 Angular2：

安装插件tns插件添加nativescript-telerik-ui 在此 rebuild 之后，使用 tns 运行 android 以使新插件正常工作。

在module.ts中添加：

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

在同一个文件中：

在@NgModule imports 中添加：NativeScriptUIListViewModule,

它会准备好的。

【讨论】：

【解决方案2】：

这是我如何让它工作的。

创建一个共享指令模块，并且只在那里定义 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 {}

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

这是一个例子。

app/events/events.module.ts

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

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

app/events/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>

【讨论】：

【解决方案3】：

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

&lt;RadListView [items]="dataItems" height="300"&gt;

【讨论】：

你节省了我的另一半天 :)

【解决方案4】：

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

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

您是否也将LISTVIEW_DIRECTIVES 添加到您的应用模块中的declarations 列表中？

【讨论】：

是的 LISTVIEW_DIRECTIVES 已添加。我想知道最新版本的 nativescript 是否存在某种问题，因为它刚刚发布，并且在 GridLayout 中抛出错误似乎有点奇怪。我已经尝试过侧抽屉，并且有效，不幸的是你的建议没有改变任何东西。
可惜。我只尝试过 NativeScript 2.4，而不是 2.5，所以这是可能的。

【解决方案5】：

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

【讨论】：