Как правильно связать данные с RadListView, используя шаблон Angular + Nativescript?

Question

Обзор

Я хочу создать ниже данных в nativescript

после некоторых поисков в интернетеЯ обнаружил, что это можно сделать с помощью RadListView.Поэтому я нахожу из Playground и ListView / Getting-Start

Проблема

Проблема, с которой я сталкиваюсьпрямо сейчас моя 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;
    }
}

Вопрос

Пожалуйста, помогите мне в этом, что яделать неправильно в моем коде.Как правильно связывать данные с RadListView, используя Angular.Я использую angular 6 с nativescript.

Answer 1

Я думаю, что вы запутались между синтаксисом, используемым для Angualr с Core.Мы не используем <Page> element или xmlns в Angular, они предназначены для разработки Core.

Для Angular вам придется импортировать NativeScriptUISideDrawerModule из nativescript-ui-sidedrawer/angular.Затем просто используйте тег <RadListView ...>.

Вы можете просто создать новую игровую площадку и перетащить компонент RadListView из списка, это создаст хороший и простой рабочий пример.

Answer 2

Я пытался решить эту проблему для кого-то еще этим утром, предложив следующее

На какой платформе (ios / android) вы тестируете это?Для ios очень важно указывать высоту и ширину для списка или его родительского компонента.Есть несколько других вещей, которые вы можете попробовать для дальнейшей отладки

1. Загрузка данных во входящий (загруженный) метод RadListView.

2. Попробуйтеназначить просмотр списка в загруженном виде следующим образом:

   onListLoaded (args) {this.listView = args.object;}

и обновить представление списка с помощью this.listview.refresh(); после нажатиявсе данные входящих сообщений.

Сначала укажите ActivityIndicator и скройте список.Скройте индикатор, как только у вас появятся отчеты, и сделайте потерянные видимыми.

Передайте данные во временный массив, и после того, как все элементы будут переданы, назначьте этот временный массив отчетам.

_tempInbox.push (новая папка «Входящие» («Запрос на покупку», 0,0, «Просмотр»));this._inbox = _tempInbox;