推入数组不能在jQuery函数内部工作

时间:2016-11-19 00:39:29

标签: jquery angular typescript angular2-materialize

我正在使用MaterializeCSS's autocompleteAngular2-Materialize,我正在尝试将所选值推送到数组中。但是,我收到以下错误:

Cannot read property 'push' of undefined

这是我的组件:

public items: any[] = [];

addItem() {
  $('.autocomplete-content').on('click', 'li', function () {
    let value = $(this).text().trim();
    this.items.push({ [value]: true });
  });
}

如果我在push函数之外尝试jQuery一些随机的东西,它就会起作用。

这是我的HTML:

<input type="text" (change)="addItem()" materialize="autocomplete" [materializeParams]="[{'data': myData | async}]">

1 个答案:

答案 0 :(得分:3)

您的函数中的

this是指被点击的元素,而不是您的类&#39;范围。所以要么使用arrow function

 $('.autocomplete-content').on('click', 'li', ev => {
    let value = $(ev.target).text().trim();
    this.items.push({ [value]: true });
  });

bind(this)制作课程&#39;这在click处理程序

中可用
 $('.autocomplete-content').on('click', 'li', function (ev) {
    let value = $(ev.target).text().trim();
    this.items.push({ [value]: true });
  }.bind(this));

注意将$(this)更改为可以传递给函数的元素。

您还可以在that中定义类似addItem()的内容,然后使用它来代替......

addItem() {
  var that = this;  
  $('.autocomplete-content').on('click', 'li', function () {
    let value = $(this).text().trim();
    that.items.push({ [value]: true });
  });
}