ListPicker绑定值始终设置为index而不是valueField

Question

我在html模板上显示了这个简单的数组类别。问题是，当我在列表中选择项目时，它会将book.category设置为ListPicker上项目的索引，而不是指定的valueField。我不确定这是默认行为还是我遗漏了一些东西。

阵：

public categories = [
        {id: 6, name: "Horror"},
        {id: 8, name: "Biography"},
        {id: 5, name: "Drama"},
        {id: 7, name: "Comedy"},
        {id: 2, name: "Fiction"}
    ];

HTML（角）：

<ListPicker [items]="categories" textField="name" valueField="id" 
       [(ngModel)]="book.category"></ListPicker>

Answer 1

我正在查看ListPicker - NativeScript Docs page，看起来缺少的是你没有为selectedIndexChange事件实现一个处理程序，它会将你的html元素改为：

<ListPicker [items]="categories" textField="name" valueField="id" [(ngModel)]="book.category" (selectedIndexChange)="yourSelectedIndexChangeHandlerFunction($event)"></ListPicker>

在你的.ts文件中应该添加一个函数，如下所示：

public yourSelectedIndexChangeHandlerFunction(args) {
    let picker = <ListPicker>args.object;
    this.id = picker.SelectedIndex; // assuming that your valuefield property is binding to this.id
}

只需玩上面的代码，享受！