angular - 使用 Angular + Nativescript 模板将数据与 RadListView 绑定的正确方法是什么?
问题描述
概述
我想在 nativescript 中创建下面的数据表
在互联网上进行了一些搜索后,我发现这可以使用RadListView
. 所以我从Playground和ListView/getting-started 中找到
问题
我现在面临的问题是我RadListView
没有绑定数据。
开发人员工具快照:
控制台快照:
输出:
我试过的
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;
}
}
问题
请帮助我解决我在代码中做错的事情。使用 Angular 将数据与 RadListView 绑定的正确方法是什么。我正在使用 angular 6 和 nativescript。
解决方案
今天早上我试图通过以下建议为其他人解决同样的问题
您正在测试哪个平台(ios/android)?ios 为列表视图或其父组件提供高度和宽度非常重要。您可以尝试其他几件事以进行进一步调试
在 RadListView 的(加载)方法中将数据推送到收件箱。
尝试像这样分配列表视图
onListLoaded(args) {this.listView = args.object;}
this.listview.refresh();
推送所有收件箱数据后刷新列表视图。
首先有一个activityIndicator并隐藏列表。获得报告后隐藏指示器并使丢失可见。
将数据推送到临时数组,一旦推送所有项目,将该临时数组分配给报告。
_tempInbox.push(new Inbox("采购请求",0,0,"View")); this._inbox = _tempInbox;
推荐阅读
- php - Laravel,自动登录时不会调用经过身份验证的方法
- react-native - 强制应用程序在博览会中重新启动反应本机
- sql - 在while循环中左连接表并动态命名再次用于左连接的新表
- lotus-domino - 我无法让辅助代理在 WebQueryOpen 事件上运行
- python - 在不安装 Python 的情况下运行 Python 脚本
- python - 尝试从类的所有实例访问布尔变量
- r - 在 ggplot2 中指定特定形状
- c# - 基于 TextBoxes 和 CheckBoxes MVVM 过滤 WPF DataGrid
- javascript - 使用对象工厂时如何实现原型继承?
- json - 我们如何在 elm 中将 dict 转换为 JSON?或者有什么方法可以像我们在 JS 中那样对字典进行字符串化?