在 ng2-select2 中使用 AJAX

Posted 2023-05-07

【中文标题】在 ng2-select2 中使用 AJAX

【英文标题】：Use AJAX in ng2-select2

【发布时间】：2018-02-13 11:31:59

【问题描述】：

我的 angular2js 项目中有很多下拉菜单。我在这些下拉菜单中使用ng2-select2。在某些下拉列表中，我需要根据用户在 select2 搜索框中输入的字符串从 API 过滤和获取数据。插件初始化但不触发任何 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
        
     

谁能指出我正确的方向？ 非常感谢任何帮助。

【参考方案1】：

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

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

试试

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

【讨论】：

是的，它起作用了，正如你所说，它没有呈现 HTML。你有没有找到解决这个问题的方法？谢谢

这取决于您的 json 响应结构。您当前的代码使用 id: obj.id, text: obj.name 这意味着您使用 obj.id 作为 id 和 obj.name 作为文本。尝试检查您的 json 响应

JSON 响应是正确的，但我认为问题出在 API 上，它要求请求中有一些自定义标头。感谢您的帮助，非常感谢。