代码之家 › 专栏 › 技术社区 › Ahmer Ali Ahsan

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

nativescript-angular angular2-nativescript nativescript angular

Ahmer Ali Ahsan · 技术社区 · 7 年前

概述

在互联网上搜索之后,我发现这可以用 RadListView Playground ListView/getting-started

问题

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

开发人员工具快照:

控制台快照:

我试过的

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

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

问题

请在这方面帮助我,我在代码中做错了什么。使用Angular将数据绑定到RadListView的正确方法是什么。我在nativescript中使用angular 6。

2 回复 | 直到 7 年前

Narendra 7 年前

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

您正在测试哪个平台(ios/android)?ios为listview或其父组件提供高度和宽度非常重要。您还可以尝试其他一些方法来进一步调试

尝试按如下方式在加载中分配listview

并通过以下方式刷新列表视图: this.listview.refresh();

首先使用activityIndicator并隐藏列表。一旦有报告,就隐藏指示器,并使丢失的内容可见。
将数据推送到临时数组,并在推送到所有项后,将该临时数组分配给报表。

这个。_收件箱=_临时收件箱;

Manoj 7 年前

我想你对Angualr和Core的语法感到困惑。我们不使用 <Page> xmlns 在角度上,这些被指定用于核心开发。

对于 ,则必须导入 NativeScriptUISideDrawerModule nativescript-ui-sidedrawer/angular . 然后简单地使用 <RadListView ...> 标签

您只需创建一个新的游乐场并拖动 RadListView 组件,它将创建一个漂亮而简单的工作示例。