多列表选择器

此插件允许创建多个列表选择器，就像Android一样。然而，我们不是使用多个列表，而是使用一个组件。例如

<GridLayout *ngIf="!IsAndroid" columns="*">
    <MultipleListPicker [value]="Value" [items]="Items" (valueChange)="OnValueItemsChanged($event.object.value)"></MultipleListPicker>
</GridLayout>
<GridLayout *ngIf="IsAndroid" columns="*,auto,auto,auto,auto,auto,*">
    <ListPicker col="1" [items]="Items[0]" [selectedIndex]="Value[0]" (selectedIndexChange)="OnSelectedIndexChanged(0, $event.object.selectedIndex)"></ListPicker>
    <ListPicker col="2" [items]="Items[1]" [selectedIndex]="Value[1]" (selectedIndexChange)="OnSelectedIndexChanged(1, $event.object.selectedIndex)"></ListPicker>
    <Label col="3" text="," verticalAlignment="center"></Label>
    <ListPicker col="4" [items]="Items[3]" [selectedIndex]="Value[3]" (selectedIndexChange)="OnSelectedIndexChanged(3, $event.object.selectedIndex)"></ListPicker>
    <ListPicker col="5" [items]="Items[4]" [selectedIndex]="Value[4]" (selectedIndexChange)="OnSelectedIndexChanged(4, $event.object.selectedIndex)"></ListPicker>
</GridLayout>

用法

在您的 Nativescript + Angular 应用程序中导入多列表选择器的模块

import { MultipleListPickerModule } from "@nuno-morais/nativescript-multiple-list-picker/angular";

@NgModule({
    declarations: [
    ],
    exports: [
        MultipleListPickerModule, // If you need
    ],
    imports: [
        MultipleListPickerModule,
    ],
    providers: [
    ],
    schemas: [
    ]
})

在您的视图中，您可以使用列表，如下所示

<MultipleListPicker
    [value]="Value" // Value selected
    [items]="Items" // Items
    (valueChange)="OnValueItemsChanged($event.object.value)"></MultipleListPicker>