首页 文章

使用Angular Nativescript模板将数据绑定到RadListView的正确方法是什么？

提问于
浏览 次
0

Overview

我想在nativescript中创建下面的数据表

经过一些互联网搜索，我发现这可以使用 RadListView 完成 . 所以我找到了Playground和ListView/getting-started

Problem

我现在面临的问题是我的 RadListView 没有与数据绑定 .

开发者工具快照：

控制台快照：

输出：

What I've tried

home.component.html

试过这段代码：

<page xmlns:lv="nativescript-ui-listview">
<ActionBar class="action-bar">
    <NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton>
    <ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()"
        ios.position="left">
    </ActionItem>
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>
<lv:RadListView [items]="inbox">
        <ng-template tkListItemTemplate  let-item="item" let-i="index"> 
        <StackLayout orientation="horizontal">
            <Label fontSize="20" [text]="item._Transactions" />

            <Label fontSize="14" [text]="item._PendingYourAction" />

            <Label fontSize="14" [text]="item._PendingNextLevelAction" />

            <Label fontSize="14" [text]="item._CompletedTransactions" />
        </StackLayout>
</ng-template>
</lv:RadListView>

试过这段代码：

<lv:RadListView [items]="inbox">
    <lv:RadListView.itemTemplate>
        <StackLayout orientation="horizontal">
            <Label fontSize="20" [text]="inbox._Transactions" />

            <Label fontSize="14" [text]="inbox._PendingYourAction" />

            <Label fontSize="14" [text]="inbox._PendingNextLevelAction" />

            <Label fontSize="14" [text]="inbox._CompletedTransactions" />
        </StackLayout>
    </lv:RadListView.itemTemplate>
</lv:RadListView>

home.component.ts

import { Component, OnInit } from "@angular/core";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import * as app from "tns-core-modules/application";
import { ObservableArray } from "tns-core-modules/data/observable-array/observable-array";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    inbox: ObservableArray<Inbox>;
    constructor() {
        const sideDrawer = <RadSideDrawer>app.getRootView();
        sideDrawer.gesturesEnabled = true;
    }

    ngOnInit(): void {
        this.inbox = new ObservableArray<Inbox>();
        this.inbox.push(new Inbox("Purchase Request",0,0,"View"));
        this.inbox.push(new Inbox("Purchase Order",0,0,"View"));
        this.inbox.push(new Inbox("Receipt",0,0,"View"));
        this.inbox.push(new Inbox("Payment Advice",0,0,"View"));
        console.log(this.inbox);
    }

    onDrawerButtonTap(): void {
        const sideDrawer = <RadSideDrawer>app.getRootView();
        sideDrawer.showDrawer();
    }
}

export class Inbox {
    public _Transactions: string;
    public _PendingYourAction: number;
    public _PendingNextLevelAction: number;
    public _CompletedTransactions: string;

    constructor(Transactions: string, PendingYourAction: number, PendingNextLevelAction: number, CompletedTransactions: string) {
        this._Transactions = Transactions;
        this._PendingYourAction = PendingYourAction;
        this._PendingNextLevelAction = PendingNextLevelAction;
        this._CompletedTransactions = CompletedTransactions;
    }
}

Question

请帮助我解决我在代码中出错的问题 . 使用Angular将数据绑定到RadListView的正确方法是什么 . 我正在使用带有nativescript的angular 6 .

angular nativescript angular2-nativescript nativescript-angular

2 回答

  • 0

    我认为你对Angualr和Core使用的语法感到困惑 . 我们不在Angular中使用 <Page> 元素或 xmlns ，它们被指定用于Core开发 .

    对于 Angular ，您必须从 nativescript-ui-sidedrawer/angular 导入 NativeScriptUISideDrawerModule . 然后只需使用 <RadListView ...> 标签 .

    您可以简单地创建一个新的Playground并从列表中拖动 RadListView 组件，它将创建一个漂亮而简单的工作示例 .

    回复于
  • 0

    我今天早上尝试通过建议以下内容为其他人解决同样的问题

    您正在测试哪个平台（ios / android）？对于ios来说，为listview或它的父组件提供高度和宽度非常重要 . 还有其他几件事可以尝试进一步调试

    • 将数据推送到RadListView的（已加载）方法的收件箱中 .

    • 尝试像这样加载listview

    onListLoaded（args）

    按下所有收件箱数据后，按 this.listview.refresh(); 刷新列表视图 .

    • 首先拥有activityIndicator并隐藏列表 . 报告后隐藏指示器并使其丢失 .

    • 将数据推送到临时数组，并在推送所有项目后，将该临时数组分配给报告 .

    _tempInbox.push（新收件箱（“购买请求”，0,0，“查看”））; this._inbox = _tempInbox;

    回复于

相关问题