0

NativeScript 2.1.0、Angular 2.0.0.rc3、および TypeScript 1.8.10 を使用して小さなテスト アプリをセットアップしました。Windows の Android 5.1.1 エミュレーターでプロジェクトを実行しています。

ListView が機能していますが、XML で宣言された Repeater を使用して同じデータ出力を取得しようとしています。データ出力が得られず、代わりに [オブジェクト、オブジェクト] のようなものが画面中央に縦に表示されています。

私のデータ配列は観測可能ではないことに注意してください。現在、オブジェクトの 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>
4

1 に答える 1

3

リピーターでは、ここで説明されているように、NativeScript Core データ バインディング構文を使用しています: https://docs.nativescript.org/core-concepts/bindings#binding-in-xml

ただし、nativeScript + Angular-2 を使用する場合、バインディング構文は異なります (角度構文) 。

これが、リスト ビュー バインディングが機能し、リピーター バインディングが期待どおりの結果を生成しない理由です。

編集:ここで説明したようにリピーターは機能しません(NativeScript+Angular-2 の場合は、代わりに *ngFor を使用できます)

NativeScript + Angluar-2 でのリスト ビュー バインディングの詳細: https://docs.nativescript.org/angular/ui/list-view.html#list-view

于 2016-07-07T12:22:54.487 に答える