推入数组不工作的jQuery功能内

Question

我使用MaterializeCSS's autocomplete与Angular2-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}]"> 

Answer 1

this在你的函数是指点击的元素，不是你的类范围。因此，无论使用

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

或者bind(this)使课堂这个可供click处理

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

注意改变$(this)你可以传递给函数的元素。

你也可以定义addItem()像that并使用它......

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