Nativescript radListView не показывает элемент

обзор

Nativescript radListView не показывает элемент привязки из компонента как на iOS, так и на Android OS.
Панель действий и обычный ListView показывают данные, а radlistview - нет. Консоль не показывает ошибок. Но я видел, что RadListView из следующего репозитория может работать -> https://github.com/telerik/nativescript-ui-samples-angular

Среда

Моя среда разработки ниже.

os: macOS sierra 10.12.6
узел: v6.12.0
нпм: 3.10.10
nativescript и другие можно увидеть после, в package.json

рассмотрение

Кажется, проблема в этих...
но я не могу уточнить.

  1. угловая директива
  2. инициализация наблюдаемого массива

Код

Я реализовал RadListView под углом, как показано ниже, сразу после 'tns create ui-test --ng'.

Составная часть

export class ItemsComponent implements OnInit {
    private _dataItems: ObservableArray<Item>;

    constructor() {
    }

    get dataItems(): ObservableArray<Item> {
        return this._dataItems;
    }

    ngOnInit() {
        this._dataItems = new ObservableArray([
            { id: 1, name: "Ter Stegen", role: "Goalkeeper" },
            { id: 3, name: "Piqué", role: "Defender" },
            { id: 4, name: "I. Rakitic", role: "Midfielder" }
        ]);
    }
}

HTML

<ActionBar title="My App" class="action-bar">
</ActionBar>

<GridLayout>
    <RadListView [items]="dataItems">
        <ng-template let-item="item">
            <StackLayout>
                <Label class="nameLabel" text="text"></Label>
                <Label class="nameLabel" [text]="item.name"></Label>
                <Label class="descriptionLabel" [text]="item.role"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.uitest",
    "tns-ios": {
      "version": "3.3.0"
    }
  },
  "dependencies": {
    "@angular/common": "~5.0.0",
    "@angular/compiler": "~5.0.0",
    "@angular/core": "~5.0.0",
    "@angular/forms": "~5.0.0",
    "@angular/http": "~5.0.0",
    "@angular/platform-browser": "~5.0.0",
    "@angular/platform-browser-dynamic": "~5.0.0",
    "@angular/router": "~5.0.0",
    "nativescript-angular": "5.0.0",
    "nativescript-fresco": "^3.0.2",
    "nativescript-intl": "^3.0.0",
    "nativescript-pro-ui": "3.3.0",
    "nativescript-unit-test-runner": "^0.3.2",
    "rxjs": "^5.5.2",
    "tns-core-modules": "3.4.0",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "nativescript-dev-typescript": "~0.5.0",
    "typescript": "~2.4.2"
  }
}
Источник

3 ответа

Решение

Я решил сам. Для RadListView требуется метод получения и реализации ObservableArray, а также правильное кодирование HTML. Я не заполнял параметры, такие как строка.

Но я не понимаю, как правильно использовать radListView. Теперь у меня проблемы с компоновкой radListView с другим GridLayout.

Источник

Я получил ваш код и поместил в home.component. После того, как tns создаст uitest --ng, затем плагин tns добавит nativescript-ui-listview платформу tns, удалите платформу android tns, добавьте android tns, соберите android tns, запустите android

Это работает, если вы не забудете импортировать этот модуль в home.module.ts: NativeScriptUIListViewModule

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";

import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";

@NgModule({
  imports: [
    NativeScriptCommonModule,
    HomeRoutingModule,
    NativeScriptUIListViewModule
],
declarations: [
    HomeComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
})
export class HomeModule { }

с этим item.model.ts

export class Item {
  id: number;
  name:string;
  role: string;
}

Важный

Ни в одном другом проекте это не сработало, пока я не добавил строки с тезисами в app.module.ts

import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular/listview-directives";

@NgModule({
imports: [
    ...
    NativeScriptUIListViewModule
Источник

Ты пытался _dataItems вместо dataItems? Похоже, вы определили источник ресурсов и ссылались на него без _ в RadListView.

Источник
Другие вопросы по тегам