アプレットのピッカーデータはオブジェクト配列です

ピッカー コンポーネントを操作するときに、なぜレンダリングの問題が発生するのか、または単に中国語の値を取得したいだけなのかという疑問が生じるかもしれません。

ビュー層

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

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

ロジック層

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)
    },
})

ここで、渡すのは配列オブジェクトの Object Array 型であるため、ピッカー コンポーネントを使用するときは、 、これらのフィールドの意味と値の取得方法

range-key は、レンダリング時に値を取得するためにどのフィールドが使用されるかを示します。以下は指定されていない場合です。単純なデータ構造

類似: 学校: ["中国語"、"数学"、"音楽"]

を指定する必要はありません。複雑なデータ構造の場合、フィールドを指定すると、WeChat が自動的に値を割り当てます

著者: Zhiqingyu

model:value="{{currentSchool}}" これを見つけるかもしれません。なぜモデルが value の前にバインドされているのですか。

WeChat はバインドされていないからです。双方向のデータ バインディング。単純に value="{{現在選択されているインデックスのサブスクリプト-currentSchool}}"

と記述する場合、論理レイヤーの currentSchool は変更されず、データは bindingchange イベントを通じて変更する必要があります。次のようなデータが入力されます。

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

モデルを使用する利点は、割り当て操作を行う必要がないことです。右上隅の [OK] をクリックする限り、データ内の currentSchool は「キャンセル」をクリックしても更新されません。data 内のデータの

は、handleChange の e.detail.value から取得した値です。実際、 text text

上記と同様に、インデックスを使用してソース データ内の {} オブジェクト属性を取得します。

また、 school--schoolFilter を [ に変更するという共通の操作もあります。 「湖南小学校」、「北京小学校」] この単純な構造では、e.detail.value は中国語を取得します

ただし、この要件の場合、データ schoolFilter には 2 つの配列があります -- 配列タイプと学校--Object Array type 、ピッカーで range = "{{schoolFilter}}" を使用します。

次に、ソース データの他の属性を取得するには、学校を走査して値を取得する必要があります。

概要

• データを変更するためにbindchangeを記述したくない場合は、model:

• pickerを使用してください。開始タグと終了タグのパッケージは今後のコンテンツを選択するだけです。テキスト レンダリングや {{content}} レンダリング、ビュー レンダリングや入力レンダリングを使用して自由に整理できます。オブジェクト配列内の他のフィールドを取得します。データをフィルタリングしたくない場合は、オブジェクト配列を使用してください。この構造には、インデックス取得を通じてアクセスできます。データ内に 2 つのフィールドを構築する必要はありません。

• ピッカーに表示される[OK]ボタンをクリックするだけで、ピッカー内のデータが更新されます。

• # 推奨チュートリアル: 「

  WeChat Mini」プログラム＃＃＃"＃＃＃

以上がアプレットのピッカーデータはオブジェクト配列ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。