收藏
回答

WXML取不到data 中某一个对象

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug 列表渲染 工具 6.5.3 2.3.0

- 当前 Bug 的表现(可附上截图)


- 预期表现

其它数据取出来了,就url没有

- 复现路径


- 提供一个最简复现 Demo


<view  wx:for="{{goods}}" wx:key="{{index}}">
  <view > 商品图:
   <view wx:for="{{item.url}}" wx:for-item="{{url}}" wx:key="{{index}}" >{{url.tempFileURL}} view>
  view>
  
  <view class="classify-detail">                 
      <view class="">数量: {{item.goodAmount}}view>
      <view class="">名称: {{item.goodName}}view>
      <view class="">价格: {{item.goodPrice}}view>
  view>
  <view class="classify-footer">
      <button size="mini" class="classify-btn" data-index="{{index}}" bindtap="deleteGoods">删除button>
  view>              
view>

// page/admin/goodsMgr/goodsMgr.js
const db = wx.cloud.database();
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    images:[],
    goodName:'',
    goodPrice:'',
    goodAmount:'',
    fileID:[],
    goods:[]
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getGoods();
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
  onNameChange:function(event){   
    this.setData({
      goodName:event.detail
    })   
  },
  onPriceChange:function(event){   
    this.setData({
      goodPrice:event.detail
    })   
  },
  onAmountChange:function(event){   
    this.setData({
      goodAmount:event.detail
    })
  },
  uploadPicture:function(event){
    wx.chooseImage({
      count: 5,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);
        this.setData({
          images: this.data.images.concat(tempFilePaths)
        });
      }
    })
  },
  submit:function(event){
    wx.showLoading({
      title: '上传中',
    });   
 
    let promiseArr=[];
    for(let i=0; i<this.data.images.length ;i++){
      let item = this.data.images[i];
      let suffix = /\.\w+$/.exec(item)[0];
      promiseArr.push(new Promise((resolve, reject) => {
        wx.cloud.uploadFile({
          cloudPath: new Date().toLocaleDateString() + '/' +new Date().getTime() + suffix,
          filePath: item, // 文件路径
          success: res => {
            // get resource ID
            console.log(res.fileID)
            this.setData({
              fileID: this.data.fileID.concat(res.fileID)
            });
            resolve();
          },
          fail: err => {
            // handle error
          }
        })
      }));
    }
    Promise.all(promiseArr).then(res =>{
      db.collection('goods').add({   
        data: {
          goodName: this.data.goodName,
          goodPrice:this.data.goodPrice,
          goodAmount:this.data.goodAmount,
          fileID:this.data.fileID        
        }
      }).then(res =>{
        wx.hideLoading();
        wx.showToast({
          title: '成功',
        })
      }).catch(res => {
        wx.hideLoading();
        wx.showToast({
          title: '评价失败',
        })
      })
    })
  },
  //Goods
  getGoods: function (e) {   
    // 查询当前用户所有的 counters
    db.collection('goods').where({
       
    }).get({
      success: res => {      
        console.log('[数据库] [查询记录] 成功: ', res)       
        // 查询存储图片url 有效期2小时
        for(let i =0 ;i < res.data.length; i++){
          wx.cloud.getTempFileURL({
            fileList: res.data[i].fileID,
            success: urlres => {                   
              res.data[i]['url'] = urlres.fileList;
            },
            fail: console.error
          })         
        }
        this.setData({
          goods: res.data 
        })
        console.log(this.data.goods);
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败:', err)
      }
    })
  },
  //---------------delete------------------------------
  deleteGoods: function (e) {
     
    console.log(e)
    debugger
    let goods = this.data.goods;
    this.setData({
      goods: goods,
    })   
    this.syngoodDB();
  },
  //--------------syngoodDB------------------------
  syngoodDB: function () {
    const db = wx.cloud.database();
    const _ = db.command;
    var gooddbid = this.data.gooddbid;
    db.collection('data1').doc(gooddbid).update({
      data: {
        //默认是更新  style.color  字段为 'blue' 而不是把  style  字段更新为  { color: 'blue' }  对象:
        //如果需要替换更新一条记录,可以在记录上使用  set  方法,替换更新意味着用传入的对象替换指定的记录:
        data: _.set(this.data.goods)
      },
      success: res => {
        console.log('[数据库] [更新记录] 成功:', gooddbid);
        wx.showToast({
          title: '[数据库][更新记录] 成功:' + gooddbid,
        })
      },
      fail: err => {
        icon: 'none',
          console.log('[数据库] [更新记录] 失败:', err)
      }
    })
  }, 
})


最后一次编辑于  2019-06-17
回答关注问题邀请回答
收藏

2 个回答

  • 〆、维生素ゝ
    〆、维生素ゝ
    2019-06-17

    wx:for-item='url'   去掉外面的{{ }}

    2019-06-17
    有用
    回复 3
    • 知行
      知行
      2019-06-17

      按你方法试了没用

      2019-06-17
      回复
    • 〆、维生素ゝ
      〆、维生素ゝ
      2019-06-18回复知行

      把你从服务器获取的数据结构打印出来给人看看

      2019-06-18
      回复
    • 知行
      知行
      2019-06-22

      js 代码是异步导致的

      2019-06-22
      回复
  • 拾忆
    拾忆
    2019-06-17

    发了一堆代码重点地方截图反而没有,谁知道你数据结构是啥样子的。

    tempFileURL难道不是在item里?

    2019-06-17
    有用
    回复 1
    • 知行
      知行
      2019-06-17

      不好意思排版不好, 我更新了截图, 再看一下。另外我的代码分2部分的,第一部分是wxml,第二部分是js 完整代码。

      2019-06-17
      回复
登录 后发表内容