Question

dom-repeat 中出现错误“Uncaught TypeError: Cannot set property 'src' of null”

2017-10-07

152

javascript polymer

我有一个 dom-repeat，我想在其中插入一个基于函数的带有 src 的图像。这次在函数中使用索引无法解决问题，现在我陷入困境。Polymer 版本是 1.8.0 到目前为止，我尝试了不同的方法，最后一个是：

<template is="dom-repeat" items="{{top.top}}" as="item">
       <img id="testid" src="{{imgurl}}">
</template>

<script>
   Polymer({
     is: 'test',

  ready: function() {
// Polymer.dom(this).querySelector('testid').src = this.imgurl;
 this.$.testid.src = this.imgurl;
  } ,

properties: {
    top: {
        type: Array,
        value: function() { return []; }
    },

    imgurl: {
        type: String,
        notify: true,
        reflectToAttribute: true,
        computed: 'changeimg(score, oldscore)'  
        }
  },

  changeimg: function(score, oldscore) {

      if( score>oldscore ){url = "images/reddown.png";}
      else if(score<oldscore){url ="images/greenup.png";}
      else {url = "images/blueorizontal.png";}
      return url;
  },

....


  });
 </script>

结果总是一样... 有什么想法吗？谢谢

Answer 1

this.$ 仅适用于首次创建元素时属于元素一部分的元素。使用 dom-repeat 或 dom-if 时不会出现这种情况，因此 this.$.testid 不存在，从而导致您看到的错误。

另外，您使用 querySelector 的另一次尝试将只返回一个 img 元素，但在呈现时，您的每个分数条目都会有一个 img 元素。

计算属性 imgurl 也帮不了您，因为您的元素只有一个 imgurl 属性，无论显示什么分数条目，该属性始终相同，即使提供了分数值也是如此。

解决问题的方法是使用计算绑定，它会计算出每个显示的正确 img src分数。

<img src="[[changeimg(item.score, item.oldscore)]]">

Answer 2

问题出在 computed: 'changeimg(score, oldscore)' 这一行。

您尚未定义 score 和 oldscore 。这是计算值，不是观察者。

因此，定义这些将解决问题。