NativeScript Repeater Binding Issue - Showing [Object object] Vertically

Question

I've got a small test app setup using NativeScript 2.1.0, Angular 2.0.0.rc3, and TypeScript 1.8.10. I'm running the project in an Android 5.1.1 Emulator on Windows.

I have a ListView working but now I'm trying to get the same data output using a Repeater declared in XML. I'm not getting the data output, instead I'm seeing something like [Object, Object] displayed vertically in the center of the screen.

Note that my data array is not an observable. It's currently a Typescript array of objects.

I'm not getting any error messages. Everything compiles and runs without errors.

Here's my repeater code. What am I doing wrong?

<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>

Nick Iliev · Accepted Answer · 2016-08-12T06:25:40.240

3

In your Repeater you are using the NativeScript Core data binding syntax as described here : https://docs.nativescript.org/core-concepts/bindings#binding-in-xml

However when using nativeScript + Angular-2 the binding syntax is different (the angular syntax) as described here : https://docs.nativescript.org/angular/core-concepts/DataBinding.html

This is the reason your list-view binding is working and your repeater binding is not producing the expected results.

EDIT: Repeater won't work as discussed here (for NativeScript+Angular-2 you can use *ngFor instead)

More about list-view binding in NativeScript + Angluar-2 here: https://docs.nativescript.org/angular/ui/list-view.html#list-view

edited Aug 12 '16 at 06:25

answered Jul 07 '16 at 12:22

Nick Iliev

9,610
3
35
89

Hod do I access the item? Do I need a let-item statement somewhere? I think I've tried it and it always throws errors. – HK1 Jul 07 '16 at 14:38
repeater won't work for N+A2 so use the list-view with the exact syntax in your code – Nick Iliev Jul 07 '16 at 14:41
I see your EDIT now. It renders my comment obsolete. – HK1 Jul 07 '16 at 14:42
The repeater is using the old ngRepeat which is obsolete in Angular-2 where ngFor is the directive to use.. so you can use ngFor in nativeScript + Angular-2 ..take a look here https://docs.nativescript.org/angular/ui/list-view.html#using-an-item-template or here https://github.com/NativeScript/nativescript-angular/issues/210 where example for using ngFor with different layouts are presented – Nick Iliev Jul 07 '16 at 14:52
also here an example with repeating cards using ngFor http://www.nativescriptsnacks.com/snippets/2016/06/28/repeated-cards.html – Nick Iliev Jul 07 '16 at 15:09

NativeScript Repeater Binding Issue - Showing [Object object] Vertically

1 Answers1