Angularjs 在ng2-select2中使用AJAX

我的angular2js项目中有很多下拉列表。我正在使用这些下拉列表。在一些下拉列表中，我需要根据用户类型的字符串过滤API中的数据并将其提取到select2搜索框中。插件初始化，但不触发任何AJAX

到目前为止，我的代码是：

HTML:

<select2 [data]="options | async"></select2>

组成部分：

import { Component,OnInit  } from '@angular/core';
import {Select2OptionData} from 'ng2-select2';
import {AlertService, LTJService} from '../../_services/index';
import { Observable } from 'rxjs/Observable';

@Component({
    selector: 'nationalities',
    templateUrl: '../../views/buyer_profile/nationalities.component.html',
})

export class NationalityComponent implements OnInit {
    //public nationalities: Observable<Array<Select2OptionData>>;
    public options: Select2Options;
    public ajaxOptions: Select2AjaxOptions;


    constructor(private alertService: AlertService, private ltjService: LTJService) {
    }

    ngOnInit(): void {
        console.log('In ngOnInit');

        this.ajaxOptions = {
            url: '<API URL>',
            dataType: 'json',
            delay: 250,
            cache: false,
            data: (params: any) => {
                console.log("AA", params);
                return {
                    query: params.term,
                    gotoPage: params.page
                }
            },
            processResults: (data: any, params: any) => {
                params.page = params.page || 1;
                console.log('data: ', data);
                return {
                    results: $.map(data.data, function(obj) {
                        return {id: obj.id, text: obj.name};
                    }),
                    pagination: {
                        more: (params.page * 10) < data.objectValue.total_count
                    }
                };
            },
        };

        this.options = {
            ajax: this.ajaxOptions
        }
    } 
}

从'@angular/core'导入{Component，OnInit}；
从“ng2-select2”导入{Select2OptionData}；
从“../../\u services/index”导入{AlertService，LTJService}；
从“rxjs/Observable”导入{Observable}；
@组成部分({
选择器：“国籍”，
templateUrl:“../../views/buyer_profile/nations.component.html”，
})
导出类NationalityComponent在NIT上实现{
//公共国籍：可见；
公共选项：选择2个选项；
公共ajaxOptions：选择2AjaxOptions；
构造函数（专用alertService:alertService，专用ltjService:ltjService）{
}
ngOnInit（）：void{
console.log（'In ngOnInit'）；
this.ajaxOptions={
url:“”，
数据类型：“json”，
延误：250，
cache:false，
数据：（参数：任意）=>{
控制台日志（“AA”，参数）；
返回{
查询：params.term，
gotoPage:params.page
}
},
processResults：（数据：任意，参数：任意）=>{
params.page=params.page | | 1；
console.log（'数据：'，数据）；
返回{
结果：$.map（data.data，function）（obj）{
返回{id:obj.id，text:obj.name}；
}),
分页：{
更多：（params.page*10）

谁能给我指出正确的方向吗？

---

非常感谢您的帮助。

您使用的[data]将只输入数据，而不是选项

<select2 [data]="options | async"></select2> 

试一试

是的，它工作了，正如您所说，它没有呈现HTML。你找到这方面的工作了吗？这取决于json响应结构。您当前的代码使用

{id:obj.id，text:obj.name}

，这意味着您使用obj.id作为id，obj.name作为文本。请尝试检查json响应json响应是否正确，但我认为问题在于API需要在请求中使用一些自定义头。谢谢你的帮助，非常感谢。

<select2 [options]="options | async"></select2>