Проблема привязки NativeScript Repeater — отображение [Object object] по вертикали

У меня есть небольшое тестовое приложение с использованием NativeScript 2.1.0, Angular 2.0.0.rc3 и TypeScript 1.8.10. Я запускаю проект в эмуляторе Android 5.1.1 в Windows.

У меня работает ListView, но теперь я пытаюсь получить тот же вывод данных, используя повторитель, объявленный в XML. Я не получаю вывод данных, вместо этого я вижу что-то вроде [Object, Object], отображаемое вертикально в центре экрана.

Обратите внимание, что мой массив данных не является наблюдаемым. В настоящее время это массив объектов Typescript.

Я не получаю никаких сообщений об ошибках. Все компилируется и работает без ошибок.

Вот мой код повторителя. Что я делаю не так?

<GridLayout rows="*">
    <!-- this code doesn't work, produces [Object object], in middle of screen -->
    <Repeater items="{{ personList }}" row="1">
        <Repeater.itemsLayout>
            <StackLayout orientation="horizontal"></StackLayout>
        </Repeater.itemsLayout>
        <Repeater.itemTemplate>
                <Label text="{{ FirstName }}" class="medium-spacing"></Label>
        </Repeater.itemTemplate>
    </Repeater>

    <!-- This Code Works
    <ListView [items]="personList" row="1">
        <template let-item="item">
            <GridLayout row="0" columns="80,80">
                <Label col="0" [text]="item.FirstName"></Label>
                <Label col="1" [text]="item.LastName"></Label>
            </GridLayout>
        </template>
    </ListView>
    -->

    <ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" row="1" horizontalAlignment="center"
        verticalAlignment="center"></ActivityIndicator>
</GridLayout>

nativescript android angular2-nativescript
person HK1    schedule 06.07.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

В своем повторителе вы используете синтаксис привязки данных NativeScript Core, как описано здесь: https://docs.nativescript.org/core-concepts/bindings#binding-in-xml

Однако при использовании nativeScript + Angular-2 синтаксис привязки отличается (синтаксис angular), как описано здесь: https://docs.nativescript.org/angular/core-concepts/DataBinding.html

Это причина, по которой ваша привязка списка-представления работает, а привязка повторителя не дает ожидаемых результатов.

РЕДАКТИРОВАТЬ: повторитель не будет работать, как описано здесь (для NativeScript+Angular-2 вместо этого вы можете использовать *ngFor)

Подробнее о привязке представления списка в NativeScript + Angluar-2 здесь: https://docs.nativescript.org/angular/ui/list-view.html#list-view

person Nick Iliev    schedule 07.07.2016
comment
Как я могу получить доступ к элементу? Нужно ли мне где-нибудь оператор let-item? Я думаю, что пробовал, и он всегда выдает ошибки. - person HK1; 07.07.2016
comment
повторитель не будет работать для N + A2, поэтому используйте представление списка с точным синтаксисом в вашем коде ‹template let-item=item› - person Nick Iliev; 07.07.2016
comment
Теперь я вижу ваш РЕДАКТИРОВАТЬ. Это делает мой комментарий устаревшим. - person HK1; 07.07.2016
comment
Повторитель использует старый ngRepeat, который устарел в Angular-2, где ngFor — это директива для использования.. поэтому вы можете использовать ngFor в nativeScript + Angular-2.. посмотрите здесь docs.nativescript.org/angular/ui/ или здесь github.com/NativeScript/nativescript-angular/issues/210, где пример использования ngFor с разными представлены макеты - person Nick Iliev; 07.07.2016
comment
также здесь пример с повторяющимися карточками с использованием ngFor nativescriptsnacks.com/snippets /2016/06/28/repeated-cards.html - person Nick Iliev; 07.07.2016