推入數組不工作的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 }); 
    }); 
}