在 ng2-select2 中使用 AJAX

2024-02-29

我的 angular2js 项目中有很多下拉菜单。我在用ng2-选择2 https://github.com/NejcZdovc/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
        }
    } 
}

有人能指出我正确的方向吗? 非常感谢任何帮助。


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

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

try

<select2 [options]="options | async"></select2>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 ng2-select2 中使用 AJAX 的相关文章