Получение Nativescript Telerik UI RadListView для работы в Angular

ТНС 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 не является объектом (оценка 'itemViewDimensions.measuredWidth') 5 февраля 11:40:53 Маркус -iMac com.apple.CoreSimulator.SimDevice.1A8C1E25-DAC0-4BA0-822E-5A6F731F1CD7.launchd_sim[31919] (UIKitApplication:org.nativescript.t4g[0x7b2a][36194]): служба прервана из-за ошибки сегментации: 11

Не уверен, что я где-то пропустил импорт чего-то, но документация довольно схематична, поэтому трудно быть уверенным и смотреть на примеры


nativescript listview angular2-nativescript nativescript-telerik-ui
person dottodot    schedule 05.02.2017    source источник
comment
попробуйте ‹GridLayout rows='*'›   -  person Habeeb    schedule 05.02.2017
comment
Не имело никакого значения   -  person dottodot    schedule 05.02.2017
comment
Интересен этот пример (github.com/telerik/nativescript-ui-samples-angular/blob/release/) из официального репозитория nativescript-ui работает нормально и имеет ту же структуру пользовательского интерфейса. Можете ли вы попробовать это?   -  person Vladimir Amiorkov    schedule 06.02.2017
comment
Пробовал это и все еще дает мне файл ошибки: ///app/tns_modules/nativescript-telerik-ui/listview/listview.js:1034:104: JS ERROR TypeError: undefined не является объектом (оценка 'itemViewDimensions.measuredWidth')   -  person dottodot    schedule 07.02.2017
comment
Протестировано с последней версией NativeScript 2.5.0 в упомянутом (github.com/telerik /nativescript-ui-samples-angular) репозиторий, и ошибки не возникло.   -  person Vladimir Amiorkov    schedule 08.02.2017
comment
Обратите внимание, что RadListView нельзя помещать в контейнеры типа StackLayout, поскольку они измеряются способом, несовместимым с этим элементом управления.   -  person Vladimir Amiorkov    schedule 08.02.2017
comment
Это работает <ActionBar title="Events"></ActionBar> <GridLayout> <ListView [items]="events | async"> <template let-item="item"> <StackLayout orientation="vertical"> <Image [src]="'https:' + item.image" height="200"></Image> <Label class="nameLabel" [text]="item.title"></Label> </StackLayout> </template> </ListView> </GridLayout>   -  person dottodot    schedule 09.02.2017
comment
Это не <ActionBar title="Events"></ActionBar> <GridLayout tkExampleTitle tkToggleNavButton> <RadListView [items]="events | async"> <template tkListItemTemplate let-item="item"> <StackLayout orientation="vertical"> <Image [src]="'https:' + item.image" height="200"></Image> <Label class="nameLabel" [text]="item.title"></Label> </StackLayout> </template> </RadListView> </GridLayout>   -  person dottodot    schedule 09.02.2017
comment
Я получаю сообщение об ошибке file:///app/tns_modules/nativescript-telerik-ui/listview/listview.js:1034:104: JS ERROR TypeError: undefined is not an object (evaluating 'itemViewDimensions.measuredWidth')   -  person dottodot    schedule 09.02.2017

Ответы (5)


arrow_upward
5
arrow_downward

LISTVIEW_DIRECTIVES предназначен для Nativescript с Javascript.

Для углового2:

Установите плагин tns plugin add nativescript-telerik-ui после этой перестройки с помощью tns run android, чтобы новый плагин заработал.

в module.ts добавить:

импорт {NativeScriptUIListViewModule} из "nativescript-telerik-ui/listview/angular";

и в том же файле:

в @NgModule imports добавить: NativeScriptUIListViewModule,

и он будет готов.

person Efrain Zaldumbide    schedule 05.03.2017

arrow_upward
1
arrow_downward

Вот как я заставил это работать.

  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.

Вот пример.

приложение/события/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>
person Ivan Chang    schedule 26.02.2017

arrow_upward
1
arrow_downward

нужно задать высоту списка, по умолчанию высота будет 0px;

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

person Mahdi    schedule 07.11.2018
comment
ты спас мою вторую половину дня :) - person Yaro; 05.10.2019

arrow_upward
0
arrow_downward

Я не уверен, что это необходимо, но у меня есть RadListView в проекте, а также ListViewLinearLayout в качестве одного из его дочерних элементов:

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

И вы также добавили LISTVIEW_DIRECTIVES в список declarations в своем модуле приложения?

person Eddy Verbruggen    schedule 05.02.2017
comment
Да LISTVIEW_DIRECTIVES добавлен. Мне интересно, является ли это какой-то проблемой с последней версией нативного скрипта, поскольку она только что вышла и кажется немного странной, что выдает ошибку внутри GridLayout. Я пробовал боковой ящик, и это работает, к сожалению, ваше предложение ничего не изменило. - person dottodot; 06.02.2017
comment
Жалость. Я пробовал только с NativeScript 2.4, а не с 2.5, так что это возможно. - person Eddy Verbruggen; 06.02.2017

arrow_upward
0
arrow_downward

Я столкнулся с той же проблемой. У меня был LISTVIEW_DIRECTIVES, импортированный и объявленный в модуле приложения. Компонент, содержащий ListView, был объявлен в подмодуле. Когда я переместил определение LISTVIEW_DIRECTIVES в подмодуль, ошибка исчезла.

person Colin    schedule 22.02.2017