javascript - 小程序 picker 对于 objArray 怎么取值

Question

小程序 picker 组件，看 demo 里面是有 objArray 这个类型，但是又没有用到，我现在就是y有一组 objArray 需要用到，但是怎么都不能正常显示，麻烦大家帮忙看下：

小程序 demo 链接：picker

wxml：

<picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}">
    <view class="picker">
      当前选择：{{objectArray[index]}}
    </view>
</picker>

js:

Page({
  data: {
    objectArray: [
      {
        id: 0,
        name: '美国'
      },
      {
        id: 1,
        name: '中国'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ]
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  }
})

这样的话，显示的下拉选项就是[object Object]，选中之后在页面显示的也是这样，我现在是想下拉列表显示 name 里面的值，然后知道选中的 id，实在是不知道怎么实现了。。。

Answer 1

使用这个属性应该是可以的，修改后的代码如下：

<picker bindchange="bindPickerChange" value="{{index}}" range-key="name" range="{{objectArray}}">
    <view class="picker">
      当前选择：{{objectArray[index].name}}
    </view>
</picker>

Update1:

Page({
  data: {
    objectArray: [
      {
        id: 0,
        name: '美国'
      },
      {
        id: 1,
        name: '中国'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ]
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    var index = e.detail.value;
    var currentId = this.data.objectArray[index].id; // 这个id就是选中项的id
    this.setData({
      index: e.detail.value
    })
  }
})

Answer 2

添加 range-key='obj.item',例如

<picker bindchange="bindPickerChange" value="{{index}}" range-key="name" range="{{objectArray}}">
    <view class="picker">
      当前选择：{{objectArray[index].name}}
    </view>
</picker