使用Nativescript和JS对象一起使用ListPicker

Question

我尝试使用对象数组和ListPicker，但我的列表被渲染时，标签显示为[object Object]。

我想指定要用作列表选择器“标签”的属性。

不幸的是，NativeScript ListPicker只接受字符串数组，因此我无法使用我的Object数组，因为标签将调用toString()。

我基于以下解决方案找到了一种替代方法：https://github.com/NativeScript/NativeScript/issues/1677，但我的应用程序使用page-router-outlet，不使用元素，因此我无法使用上述提出的方法。在这种情况下，是否有可能使用对象数组来使用ListPicker或任何不依赖于Page元素加载事件的解决办法？

- guilhebl

Answer 1

有一个不公开的拉取请求可以使对象绑定更加容易： https://github.com/NativeScript/NativeScript/pull/6033 引入了新的属性到ListView组件（textField和valueField - 应该与JSON对象数组一起使用）: - textField：告诉listview应该使用哪个属性来显示每个项目。 - valueField：告诉listview应该使用哪个属性来更新selectedValue。 - selectedValue：如果指定了valueField，则是包含selectedValue的属性，那么它将包含该属性的值，否则它将包含整个选定的项目。

示例（Angular）：

<ListPicker [items]="printers" textField="name" valueField="id"></ListPicker>

在课堂上：

const printers = [{name: "Printer 1", id: 1}, {name: "Printer 2", id: 2}];

- DarkNeuron

---

哇，"3小时前回答"，问题来自2017年。谈论“恰好在时”，当我需要它的时候找到了这个完全符合我的需求。感谢@DarkNeuron！ - MrCroft

幸运的东西 :-) - DarkNeuron

有什么变化吗？当我将它绑定到一个变量时，它会将值设置为索引的值。 - FourtyTwo

Answer 2

您不需要使用任何已加载的事件。只需覆盖toString方法并将项目传递给ListPicker：

  public countries: any[] = [
    {
      value: 0,
      name: 'Sweden',
      toString: () => {
        return 'Sweden';
      }
    },
    {
      value: 1,
      name: 'Denmark',
      toString: () => {
        return 'Denmark';
      }
    },
    {
      value: 2,
      name: 'Norway',
      toString: () => {
        return 'Norway';
      }
    },
    {
      value: 3,
      name: 'Finland',
      toString: () => {
        return 'Finland';
      }
    },
    {
      value: 4,
      name: 'Iceland',
      toString: () => {
        return 'Iceland';
      }
    },
  ];

将其传递给选择器：

<ListPicker [items]="countries"></ListPicker>

- Chrillewoodz

---

假设我有一个按钮，当按下时会动态更改所有国家对象的toString方法。ListPicker在滚动列表选择器之前无法捕获更改的toString方法。是否需要特殊处理才能使对象的更改检测起作用？ - apricity

@apricity 更新引用时，使用扩展运算符 this.myData = [...myData]，或者你可能需要使用 changeDetectorRef.markForCheck()。没有示例很难确定。 - Chrillewoodz

markForCheck() 已经生效：我之前一直混淆并且在使用 detectChanges()。这篇文章对我很有帮助：https://dev59.com/clgR5IYBdhLWcg3wZcq1 - apricity