来自远程服务器的 NativeScript 自动完成数据

Question

我正在关注 this link 从远程服务器获取自动完成数据。

我将 NativeScript 与 Angular 结合使用。这是我对给定代码的更改 returns me

Unhandled Promise rejection: Cannot read property 'jsonUrl' of undefined ;

ngOnInit() {
    this.jsonUrl = 'mycustomerurl';
    let that = this;
    let options = this.createRequestHeader();
    this.autocomplete.autoCompleteTextView.loadSuggestionsAsync = function (text) {
        const promise = new Promise(function (resolve, reject) {
          http.request({
            url: this.jsonUrl + '/' + text,
            method: "GET",
            headers: options,
           }).then(function (r: any) {
                let d = r.content;
                alert(r.content.length); // Undefined
                console.error(d); // Data exists
                alert(d.length); // Undefined
                const items: Array<TokenModel> = new Array();
                for (let i = 0; i < d.length; i++) { // Not going inside loop.
                    items.push(new TokenModel(d[i].label, null));
                }
                resolve(items);
            }).catch((err) => {
                const message = 'Error fetching remote data from ' + that.jsonUrl + ': ' + err.message;
                console.log(message);
                alert(message);
                reject();
            });
        });

        return promise;
    };

  }

private createRequestHeader() {
    // set headers here e.g.
    const tokenInfo = appSettings.getString('TokenInfo');
    let headers = new HttpHeaders({
        Authorization: `Bearer ${tokenInfo}`,
        "Content-Type": "application/json",
     });

    return headers;
  }

我从我的 url https://mysite/api/SearchName/rk 中获取以下格式的远程，其中 rk 是来自远程过滤器的用户文本。

[
    {
        "label": "GLOBAL AGENCIES LTD",
        "id": "P000003",
    "val": "100.00"
    },
    {
        "label": "NEW MARKETING LTD",
        "id": "P000004",
    "val": "200.00"
    }
]

在用户选择标签时，我想对其 "id" 和 "val" 执行一些操作。

我还缺少什么？

Answer 1

当调用 loadSugfestionsAsync 函数时，

this 不会指向您的组件。使用箭头函数保留上下文或简单地使用 that.jsonUrl 已经持有对上下文的引用。

来自远程服务器的 NativeScript 自动完成数据

NativeScript autocomplete data from remote server

angular

nativescript

angular2-nativescript