Polymer Web 应用程序元素空指针异常

Question

我是使用 iron-ajax 的用户 iron-list，但在将元素推送到 iron-list 时出现 ajax 响应后给出 null 异常 =“无法读取未定义的属性 '_list'”

<script>

    Polymer({
        is: 'my-home',

        ready: function () {
            this.$._ajax.generateRequest();
        },

        onResponse: function (e) {

            var people = e.detail.response.data;
            people.forEach(function (person) {
                this.$._list.push('items', person);
            });
            // Clear the lower threshold so we can load more data when the user scrolls down again.
            this._scrollTheshold.clearTriggers();
        }

    });

</script>

这是我的 Iron-list 的 html 代码

 <iron-list id="_list" items="[[data.data]]" as="item">
        <template>

            <div style="margin-top: 0px">

                <!--Card with header image http://placehold.it/350x150/FFC107/000000-->
                <paper-card>

                    <div class="card-content">
                        <h1 class="feed_title">[[item.heading]]</h1>

                        <p class="feed_description">[[item.subheading]]</p>
                    </div>
                    <div class="card-actions">
                        <paper-button class="button-blue">
                            Share
                        </paper-button>
                        <paper-button class="button-blue">
                            Explore
                        </paper-button>
                    </div>
                </paper-card>
            </div>
        </template>
    </iron-list>

Answer 1

除了@tony19 的回答，您还可以使用bind 实现此目的

people.forEach(function (person) {
  this.$._list.push('items', person);
}.bind(this));

Answer 2

在您的 forEach() 函数表达式中，this 指的是 Window 对象，而不是 Polymer 对象。 （如果在这里使用"use strict"，this 将是undefined，但您的情况似乎并非如此。）

解决此问题的几个选项：

• 选项1：使用ES6 arrow function，它不会绑定自己的this（假设你可以使用ES6）：

  onResponse: function (e) {
    var people = e.detail.response.data;
    people.forEach(person => {
      this.$._list.push('items', person);
    });
    ...
  }
  

• 选项 2：使用ES6 for-of loop，无需回调（假设您可以使用 ES6）：

  onResponse: function (e) {
    var people = e.detail.response.data;
    for (const person of people) {
      this.$._list.push('items', person);
    });
    ...
  }
  

• 选项 3：使用ES6 spread operator 一次推送所有数组项（假设您可以使用 ES6）：

  onResponse: function (e) {
    var people = e.detail.response.data;
    this.$._list.push('items', ...people);
    ...
  }
  

• 选项 4：传入对 Polymer 对象的引用：

  onResponse: function (e) {
    var self = this;
    var people = e.detail.response.data;
    people.forEach(function (person) {
      self.$._list.push('items', person);
    });
    ...
  }
  

• 选项 5：传入对列表对象的引用：

  onResponse: function (e) {
    var list = this.$._list;
    var people = e.detail.response.data;
    people.forEach(function (person) {
      list.push('items', person);
    });
    ...
  }
  

• 选项 6：在函数表达式中显式绑定 this：

  onResponse: function (e) {
    var people = e.detail.response.data;
    people.forEach(function (person) {
      this.$._list.push('items', person);
    }.bind(this));
    ...
  }
  

• 选项 7：将this 作为forEach() 的第二个参数传递：

  onResponse: function (e) {
    var people = e.detail.response.data;
    people.forEach(function (person) {
      this.$._list.push('items', person);
    }, this);
    ...
  }