导入 NativeScriptUIListViewModule

如果你正在使用 NativeScript 来构建混合移动应用程序，其中一个强大的组件就是 ListView。NativeScript 的 ListView 组件拥有许多功能，可以用于显示列表中的数据并提供用户与该数据的交互界面。这个组件还支持多样式项，多列，加载更多等功能。但要使用这些高级功能，需要导入 NativeScriptUIListViewModule。

安装

在导入 NativeScriptUIListViewModule 之前，您需要确保已正确安装 NativeScript 的核心包，或在先前建立的 NativeScript 应用中已经存在。

如果您尚未安装 NativeScript，请访问官方网站（https://nativescript.org/）以获取安装说明并设置您的开发环境。

导入NativeScriptUIListViewModule

要在应用程序中使用 NativeScriptUIListViewModule，您需要按照下列步骤：

1. 在导入语句中包含 NativeScriptUIListViewModule，如下所示：

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

以上的代码段在你的代码库中的某个位置进行导入操作。当应用启动时，NativeScript 会自动加载这个模块并使它可用。

使用NativescriptUIListViewModule

使用 NativeScriptUIListViewModule，您可以构建一个 ListView 组件的父组件，在你的代码中加入以下代码，将创建一个像下面这样的简单列表：

import { Component, OnInit } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { DataItem } from "../dataItem";
import { DataService } from "../data.service";

@Component({
    moduleId: module.id,
    selector: "ns-items-list",
    templateUrl: "./items-list.component.html"
})
export class ItemsListComponent implements OnInit {
    items: ObservableArray<DataItem>;

    constructor(private _dataService: DataService) { }

    ngOnInit(): void {
        this.items = new ObservableArray(this._dataService.getItems());
    }
}

这里有几个关键点：

1. 我们从 ObservableArray 导入了一个类型（值对象）。
2. 在组建类的构造函数中注入了 DataService 类。
3. 在 DataService 中，我们使用一个对象数组来模拟我们的数据源。
4. 我们在 ItemsListComponent 中使用的 *ngFor 指令。

在 ObservableArray 中，我们维护一个可以动态更新的当前可见项目的列表。在这里，我们将数据从数据服务传递到组件，并放入 ObservableArray。在组件中，我们可以在模板中绑定这个 ObservableArray。

<ns-product-list [items]="items"></ns-product-list>

在上面的代码片段中，我们将 ObservableArray 对象 items 传递给自定义组件 ns-product-list ，它还需要在 HTML 模板中引用 ns-product-list 组件。

这就是如何使用 NativeScriptUIListViewModule 来快速构建 NativeScript UI 应用程序中的一个简单列表。在进行开发时，请记得查阅官方文档，深入了解更高级的功能和选项。