javascript - Comment un petit sélecteur de programme obtient-il la valeur de objArray?

Question

Petit composant de sélection de programme, vous pouvez voir qu'il existe un type objArray dans la démo, mais il n'est pas utilisé. Maintenant, j'ai un ensemble d'objArray que je dois utiliser, mais il ne peut pas être affiché normalement. :

Lien de démonstration du mini programme : 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
    })
  }
})

Dans ce cas, l'option déroulante affichée est [object Object], et la même chose est affichée sur la page après la sélection. Maintenant, je veux que la liste déroulante affiche la valeur dans le nom, puis connaisse l'identifiant sélectionné. Je ne sais vraiment pas comment le mettre en œuvre. . .

Answer 1

Il devrait être possible d'utiliser cet attribut. Le code modifié est le suivant :

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

Mise à jour1 :

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

Ajoutez range-key='obj.item', par exemple

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