Nativescript将LIstPicker与JS对象一起使用

时间:2017-04-23 02:35:33

标签: javascript nativescript angular2-nativescript

我试图将ListPicker与对象数组一起使用,我的列表将使用显示所有元素的[object Object]的标签进行渲染。

我想指定哪个属性用作"标签"对于listpicker。

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

我找到了一个基于https://github.com/NativeScript/NativeScript/issues/1677

的替代解决方案

购买我的应用程序使用page-router-outlet并且不使用元素,因此我无法使用上面提出的方法。鉴于这种情况,是否有任何可能的方法将ListPicker与对象数组一起使用或任何不依赖于Page element loaded事件的变通方法?

2 个答案:

答案 0 :(得分:4)

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

  

ListView组件(textField和   valueField-应该与JSON对象数组一起使用):

     

textField-告诉listview应该使用哪个属性来显示每个项目。

     

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

     

selectedValue-是将包含selectedValue的属性,如果指定了valueField,则它将包含该属性的值,否则它将包含整个选定的项目< / p>

示例(角度):

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

在课堂上:

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

答案 1 :(得分:3)

您根本不必使用任何已加载的活动。只需覆盖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>