Nativescript 使用 LIstPicker 和 JS 对象

Posted 2023-04-13

【中文标题】Nativescript 使用 LIstPicker 和 JS 对象

【英文标题】：Nativescript Use LIstPicker with JS object

【发布时间】：2017-09-19 21:05:54

【问题描述】：

我正在尝试将 ListPicker 与对象数组一起使用，并且我的列表被渲染为带有显示所有元素的 [object Object] 的标签。

我想指定使用哪个属性作为列表选择器的“标签”。

不幸的是，Nativescript ListPicker 只接受一个字符串数组，我不能使用我的 Object 数组，因为标签会调用 toString()

我找到了一个替代解决方案，基于：https://github.com/NativeScript/NativeScript/issues/1677

购买我的应用程序使用 page-router-outlet 并且不使用元素，因此我无法使用上述建议的方法。鉴于这种情况，是否有任何可能的方法将 ListPicker 与对象数组一起使用或任何不依赖页面元素加载事件的解决方法？

【参考方案1】：

有一个未记录的拉取请求使绑定到对象变得更加容易： https://github.com/NativeScript/NativeScript/pull/6033

向ListView 组件添加新属性（textField 和 valueField - 应该与 JSON 对象数组一起使用）：

textField - 告诉列表视图应该使用哪个属性来显示每个项目。

valueField - 告诉列表视图，应该使用哪个属性来更新 selectedValue。

selectedValue - 是包含selectedValue 的属性，如果指定了valueField，则它将包含该属性的值，否则它将包含整个选定项

示例（角度）：

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

在课堂上：

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

【讨论】：

哇“3 小时前回答”，2017 年的问题是关于“及时”:) 正是在我需要它的时候发现的。谢谢@DarkNeuron！

幸运的东西 :-)

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

【参考方案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';
      
    ,
  ];

将 em 传递给选择器：

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

【讨论】：

假设我有一个按钮，当按下它时会动态更改所有国家/地区对象的 toString 方法。在我滚动列表选择器之前，ListPicker 不会选择更改后的 toString 方法。您是否需要做一些特别的事情才能让 changedetection 与对象一起工作？

@apricity 使用扩展运算符this.myData = [...myData] 更新引用，或者您可能需要使用changeDetectorRef.markForCheck()。没有例子很难说。

markForCheck() 工作：我很困惑，之前使用过 detectChanges()。这有帮助：***.com/questions/41364386/…