3

我正在尝试使用 nativescript-angular 框架创建我的第一个移动应用程序。我被困在 RadListView 组件上。当我尝试将 RadListView 与来自数组的数据一起使用时，RadListView 会为每个项目创建一个标签并绑定到它。当我提供自己的 ng-template 时，没有任何变化，并且数组的内容仍然像以前一样显示。我尝试了一个新项目，但问题仍然存在。

代码

这是我在一个空白的新项目上尝试的代码：

src\app\home\home.component.html

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>
<GridLayout tkExampleTitle tkToggleNavButton class="page">
    <RadListView [items]="dataItems" background="red">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical" background="blue">
                <Label [text]="item" background="green"></Label>
                <Label text="Template text to display!" ></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

src\app\home\home.component.ts

import { Component, OnInit } from "@angular/core";

import { ObservableArray } from "tns-core-modules/data/observable-array";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {

    private _dataItems: ObservableArray<string>;

    constructor() {
        // Use the component constructor to inject providers.
    }

    ngOnInit(): void {
        // Init your component properties here.
        this._dataItems = new ObservableArray(["Test", "Hello", "World"]);
    }

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

src\app\app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptUIListViewModule
    ],
    declarations: [
        AppComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

我试图验证问题是否也出现在 ListView 组件中，但它运行良好。我在这个链接上发现了一个类似的问题：ListView ng-template ignored

结果

RadListView 结果

RadListView 结果

列表视图结果

列表视图结果

我忘了什么吗？我必须改变什么？

4

0 回答 0