Die Auswahldaten des Miniprogramms sind Object Array

Wenn wir die Auswahlkomponente bedienen, haben wir möglicherweise Zweifel, warum es Rendering-Probleme gibt, oder ich möchte nur den chinesischen Wert erhalten. Was soll ich tun?

Ansichtsebene

<view>数据是json的，直接展示</view>
picker使用说明：

<picker 
    mode="selector" 
    range-key="valuess" 
    range=&#39;{{school}}&#39; 
    model:value="{{currentSchool}}" 
    bindchange="handleChange"
>
  当前选择 {{school[currentSchool].valuess}}
  
</picker>

Logikebene

page({
    data: {
        school: [
            {"isNewRecord":false,"id":"2","keyss":"school","valuess":"湖南小学"},
            {"isNewRecord":false,"id":"3","keyss":"school","valuess":"北京小学"}
        ],
        currentSchool: ""
    }
    handleChange(e) {
        console.log(e)
        // 如果 range是一个 Object Array形式的，那这里的value就是索引下标
        let currentVal = e.detail.value
    
        // 对应的中文是
        let text = this.data.school[currentVal].valuess
        console.log('中文-->', text)
    },
})

Hier übergeben wir ein Array-Objekt vom Typ Object Array. Wenn wir also die Picker-Komponente verwenden, müssen wir unterscheiden: Die Bedeutung dieser Felder und wie man den Wert erhält

range-key sagt uns, welches Feld verwendet wird, um den Wert beim Rendern zu erhalten. Das Folgende ist der Fall, wenn es nicht angegeben ist einfache Datenstruktur

Ähnlich wie: Schule: [„Chinesisch“, „Mathe“, „Musik“]

muss nicht angegeben werden. Geben Sie für komplexe Datenstrukturen Felder an, und WeChat weist uns automatisch Werte zu

Autor: Zhiqingyu

model:value="{{currentSchool}}" Möglicherweise finden Sie Folgendes: Warum steht „model“ vor „value“?

weil WeChat es ist nicht Zwei-Wege-Datenbindung, wenn Sie einfach schreiben value="{{Currently selected index subscript-currentSchool}}"

currentSchool in der logischen Ebene ändert sich nicht, die Daten müssen über das bindchange-Ereignis geändert werden Daten ein, wie folgt:

handleChange(e) {
    this.setData({
       currentSchool: e.detail.value
    })
}

Der Vorteil der Verwendung von „model“ besteht darin, dass wir den Zuweisungsvorgang nicht durchführen müssen. Solange wir oben rechts auf „OK“ klicken, wird die aktuelle Schule in den Daten angezeigt aktualisiert. Durch Klicken auf „Abbrechen“ werden

der Daten in data nicht aktualisiert. Der Wert, den wir von e.detail.value in handleChange erhalten, ist möglicherweise auch ein Index will text text

Verwenden Sie einfach den Index, um die {}-Objektattribute in den Quelldaten wie oben abzurufen

Es gibt auch eine allgemeine Operation, die darin besteht, school--schoolFilter in [" zu ändern Hunan Primary School“, „Peking Primary School“] Diese einfache Struktur erhält dann e.detail.value auf Chinesisch

Aber für diese Anforderung gibt es zwei Arrays in den Daten: schoolFilter – Array-Typ und Schule --Objekt-Array-Typ, verwenden Sie range = „{{schoolFilter}}“ im Picker

Um dann andere Attribute der Quelldaten zu erhalten, müssen Sie die Schule durchlaufen und dann den Wert erhalten

Zusammenfassung

• Wenn Sie bindchange nicht schreiben möchten, um die Daten zu ändern, verwenden Sie model:

• picker. Die Pakete im Start-Tag und End-Tag wählen nur den zukünftigen Inhalt aus. Sie können das Text-Rendering oder das {{content}}-Rendering organisieren und verwenden oder das Rendering oder das Eingabe-Rendering anzeigen

  Um andere Felder im Objektarray abzurufen, verwenden Sie das Objektarray. Auf diese Struktur kann über den Index zugegriffen werden. Es ist nicht erforderlich, 2 Felder in den Daten zu erstellen 🎜>

• Erst durch Klicken auf die im Picker angezeigte Schaltfläche [OK] werden die Daten im Picker aktualisiert

• Empfohlenes Tutorial: „

  WeChat Mini-Programm
"

Das obige ist der detaillierte Inhalt vonDie Auswahldaten des Miniprogramms sind Object Array. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!