在 Ajax 查询中使用预输入时出现 ember-select-2 问题

我在用着余烬-选择-2 https://istefo.github.io/ember-select-2/#/examples作为 ember 应用程序中的预输入。问题是我可以从服务器获取数据，但数据没有显示在下拉列表中。任何帮助将不胜感激。提前致谢。

 {{select-2
    placeholder="Choose from our many pizzas"
    value=chosenTypeaheadPizza
    typeaheadSearchingText="Searching pizzas"
    typeaheadNoMatchesText="No pizzas found for '%@'"
    typeaheadErrorText="Loading failed: %@"
    query="queryPizzas"
 }}

和动作处理程序是

queryPizzas(query) {    
        var self = this;
        var store = self.get('store');
        let adapter = store.adapterFor("pizzas"); 
        let serachQuery = query.term;      
           adapter.searchPizza(serachQuery).then(function(response) {

                console.log(response.pizzas);

           }); 
    },

回复

    {
    "pizzas": [{
        "id": 1,
        "name": "pizza 1"
    }, {
        "id": 2,
        "name": "pizza 2"
    }]
   }

如果您检查examples https://istefo.github.io/ember-select-2/#/examplesember-select-2；你可以看到它正在使用deferred传递给操作处理程序的参数以显示数据。它说“确保不要直接调用query.callback，但始终使用提供的延迟！”。这意味着，您需要致电deferred这将作为操作处理程序的第二个参数提供。我不是 ember-select-2 方面的专家，但你应该做的可能是

queryPizzas(query, deferred) {    
    var self = this;
    var store = self.get('store');
    let adapter = store.adapterFor("pizzas"); 
    let searchQuery = query.term;      
    adapter.searchPizza(searchQuery).then(function(data) {
      //try to pass the array as the data
      deferred.resolve({data: data.pizzas, more: false});
    }, deferred.reject);
}

上面提供的解决方案适用于您提供的数据格式。请检查对应的twiddle https://ember-twiddle.com/a792a9366547a6780b65e54592247423。在这个例子中；我使用了模拟承诺来模拟服务器远程调用，并返回您提供的示例数据作为要在 select 中显示的内容。你必须使用optionLabelPath为了在选择中显示比萨饼的名称，如下所示application.hbs.