Typescript 选择2个重新加载速度不够快的远程数据结果，始终为1+；[奥雷莉亚、打字稿、招摇过市]后面的人物

我使用Select2（4.0.6-rc.1版）的远程数据选项来加载来自Swagger API调用的结果。我找不到太多关于加载服务器端数据的文档，所以这可能是问题所在，因为我正在使用一些变通方法。下拉列表不加载最新的

参数项

结果

基本上只使用Aurelia特定的功能，其中我引用了

HTML:

API调用：

public apiCall (searchTerm: string, type: string) {
    return this.service.search(seachTerm, type)
        .then(response => {
            if (response.status === 200) {
                const rawJSON = response.result;
                    this.optionsInSelect2Format = [];
                    //Lodash ForEach
                    _.forEach(rawJSON, (entry) => {
                        this.optionsInSelect2Format.push({
                            text: entry.entryName,
                            id: entry.entryID
                        });
                    });
                    return this.optionsInSelect2Format;
                }
            }
        })
        .catch(error => {
            //Error message
        });

每次用户键入输入时都会触发API调用，但下拉列表的重新加载不会可靠地发生。下拉列表似乎在键入第一个或第二个字符后重新加载，它加载到下拉列表中的数据滞后于实际的param.term。例如，用户在“i”中键入，但未加载任何内容，用户在“i”之后加上“t”，并加载“i”结果，而不是将“it”结果加载到下拉列表中

我确实看到

选项inselect2format

数组已更新为“it”结果。这是一个异步问题吗

行为特征：

---

根据我对Select2的有限理解，

ajax.url

应该返回Select2将调用的url，然后将结果传递到

processResults

您自己直接调用API并从中返回结果，而不是将url返回给select2。我不相信

url

函数实际上正在等待，因此（可能）会发生以下情况：

选择2 calls

url

以获取url，您的

this.apiCall

将被调用

根据

url

（未定义）的结果，select2尝试拨打电话，但无法拨打-因此我猜它没有任何作用

processResults

将立即同步调用（而您的

apiCall

仍在执行），并且

此选项Inselect2Format

尚未更新

您应该完全让select2为您处理api调用（实际上是给它一个url并相应地处理数据），或者您应该完全自己处理它

在后一种情况下，您可以订阅

change。选择2

event（不确定用户键入内容时是否触发），然后在该事件上调用调用api的单个方法，等待返回数据，然后设置新的数据源。使用

data

属性而不是

ajax

属性

如果您只需保持代码的原样，并将

data

属性设置为

this.options inselect2format

，则可能会起作用，但您必须尝试一下

optionsInSelect2Format = { text: string, id: string }[];
theSelect2: any;
variableId: string;
variableName: string;

public initializeSelect2() {
    this.theSelect2 = $(this.referenceToHTMLSelect2).select2({
        placeholder: 'Select',
        width: '100%',
        minimumInputLength: 1,
        language: {
            inputTooShort: () => {
                return 'Enter at least 1 character to search'
            }
        },
        ajax: {
            url: (params) => {
                this.apiCall(params.term, "hardCodedStringNeededToExecuteAPICall");
            },
            processResults: (params) => {
                return {
                    results: this.optionsInSelect2Format
                }
            }
        }
    });
    this.theSelect2.on('select2:select', (e) => {
        let data = this.theSelect2.select2('data')[0];
        this.variableId = data.id;
        this.variableName = data.text;

    });
}

public apiCall (searchTerm: string, type: string) {
    return this.service.search(seachTerm, type)
        .then(response => {
            if (response.status === 200) {
                const rawJSON = response.result;
                    this.optionsInSelect2Format = [];
                    //Lodash ForEach
                    _.forEach(rawJSON, (entry) => {
                        this.optionsInSelect2Format.push({
                            text: entry.entryName,
                            id: entry.entryID
                        });
                    });
                    return this.optionsInSelect2Format;
                }
            }
        })
        .catch(error => {
            //Error message
        });