javascript - Wie erhält die kleine Programmauswahl den Wert von objArray?

Question

Kleine Programmauswahlkomponente, Sie können sehen, dass es in der Demo einen Typ von objArray gibt, der jedoch nicht verwendet wird. Jetzt muss ich nur einen Satz von objArray verwenden, der jedoch nicht normal angezeigt werden kann Schaut mal rein:

Mini-Programm-Demo-Link: 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
    })
  }
})

In diesem Fall ist die angezeigte Dropdown-Option [Objekt Objekt], und das Gleiche wird nach der Auswahl auf der Seite angezeigt. Jetzt möchte ich, dass die Dropdown-Liste den Wert im Namen anzeigt und dann die ausgewählte ID kennt. Ich weiß wirklich nicht, wie ich es umsetzen soll. . .

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