问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

微信小程序wxml Map 如何遍历？

头像
阿超
    1001834

    index.ts

    
const ad = await adService.IMap();
const recycleTypeGroup = await recycleTypeService.IGroup(); 
that.setData({
    ad:ad,
    recycleTypeGroup:recycleTypeGroup
})

console.info(ad);
console.info(recycleTypeGroup);
// ad 输出 
Map(11){11=>{id:11,title:"xxx"},10=>{id:10,title:"xxx"},9=>{id:9,title:"xxx"}}
// recycleTypeGroup 输出
Map(3) {3 => Array(5), 1 => Array(6), 0 => Array(2)}

console.info(ad.get(11).title);// 正常输出 xxx
console.info(recycleTypeGroup.get(3)); // 正常输出数组
console.info(recycleTypeGroup.get(3)[0]); 正常输出对象

    index.wxml

    {{ ad.get(11).title }} // 没有输出
{{ ad.get(10).title }} // 没有输出

<block wx:for="recycleTypeGroup.get(3)" wx:key="item">
{{item}} // 输出乱码
<block/>
<block wx:for="recycleTypeGroup[3]">
{{item}} // 输出乱码
<block/>

    AI的建议是转数组

    比如：

    const a1=ad.get(1); // 获取一个对象
const recycleTypeGroup3=recycleTypeGroup.get(3) // 获取一个数组
that.setData({
………………
})

    请问我这种 map 类型可能是 key,object 和 key,array 这种类型，在微信小程序中应该如何遍历

    Microsoft前端微信小程序javascripttypescript
    阅读 420
    avatarAI BotBETA

    在微信小程序中，直接在 WXML 模板中遍历 JavaScript 的 Map 对象是不被支持的。WXML 模板仅支持对数组（Array）类型的遍历。因此，你需要先将 Map 对象转换为数组（Array），然后再在 WXML 中进行遍历。

    以下是如何将你的 Map 对象转换为数组并在 WXML 中遍历的示例：

    index.ts

    首先，将 Map 对象转换为数组，并更新到页面的数据中：

    const ad = await adService.IMap();
const recycleTypeGroup = await recycleTypeService.IGroup();

// 将 Map 转换为数组
const adArray = Array.from(ad.entries()).map(([key, value]) => ({ key, ...value }));
const recycleTypeGroupArray = Array.from(recycleTypeGroup.entries()).map(([key, value]) => ({ key, value }));

that.setData({
    adArray: adArray,
    recycleTypeGroupArray: recycleTypeGroupArray
});

    index.wxml

    然后，在 WXML 中使用 wx:for 来遍历这些数组：

    <!-- 遍历 adArray -->
<block wx:for="{{adArray}}" wx:key="key">
    Key: {{item.key}}, Title: {{item.title}}
</block>

<!-- 遍历 recycleTypeGroupArray 中 key 为 3 的数组 -->
<block wx:for="{{recycleTypeGroupArray}}" wx:key="key">
    <block wx:if="{{item.key === 3}}">
        <block wx:for="{{item.value}}" wx:key="*this">
            {{item}} <!-- 这里假设 item 是一个对象，你可以根据需要访问对象的属性 -->
        </block>
    </block>
</block>

    在上面的代码中，我们首先将 Map 对象转换为数组，每个数组元素都是一个对象，包含原始的 key 和 value。然后，在 WXML 中使用 wx:for 来遍历这些数组。对于 recycleTypeGroupArray，我们进一步使用 wx:if 来筛选出 key 为 3 的数组，并遍历其中的元素。

    这种方法允许你在微信小程序中有效地遍历 Map 对象，即使它们的值可能是对象或数组。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题
    logo
    Microsoft
    子站问答
    访问
    宣传栏