Angularjs Typehead未填充有角度的ui 角度1.5.8 引导程序3.3.7（CSS） 角度用户界面2.0.2

使用angular Typeahead（）需要一个对象列表，它将通过HTML显示在ui组件中

问题

//submit search for issuers or issuedCard
submit() {
    this.isSubmitting = true;

    this._SearchService.performSearch(this.search)
    .then(
        (resp) => {
            //e.g. [{id:1, name:'test'}]
            console.log('Search Result', resp);
            return resp;                                
        },

        (err) => {
            console.log('Error Search', err);
            this.reset(false);
            this.errors = err;
            return [];
        }
    );

    //Comment out method above to see this static data returning and working as should be :'(
    //return [{id:865,issuer: {},name:"British Testing"},
    //    {id:866,issuer: {},name:"American Testing"}];
}

将

promise

从服务返回到组件（1.5样式的控制器、视图、绑定）

控制器功能使用从服务返回的

承诺

，然后执行

逻辑并返回对象的
数组

Typeahead不处理数组。。。执行控制台日志时，可以看到阵列

如果我静态地传递相同的对象数组，而不使用服务方法，则功能正常

HTML

            <input type="text" ng-model="$ctrl.search.term" ng-disabled="!$ctrl.search.type"
                   typeahead-wait-ms="600"
                   placeholder="Search..."
                   uib-typeahead="res as res.name for res in $ctrl.submit($viewValue)"
                   typeahead-no-results="noResults" class="form-control" required>
            <i ng-show="loadingLocations" class="icon ion-refresh"></i>

            <div ng-show="noResults">
                <i class="icon ion-close"></i> No Results Found
            </div> 

            <select class="form-control custom-select-md"
                   ng-model="$ctrl.search.type"
                   placeholder="Type"
                   required>
                <option value="" disabled selected>Select Type?</option>
                <option value="car">car</option>
                <option value="van">van</option>
            </select>

//submit search for issuers or issuedCard
submit() {
    this.isSubmitting = true;

    this._SearchService.performSearch(this.search)
    .then(
        (resp) => {
            //e.g. [{id:1, name:'test'}]
            console.log('Search Result', resp);
            return resp;                                
        },

        (err) => {
            console.log('Error Search', err);
            this.reset(false);
            this.errors = err;
            return [];
        }
    );

    //Comment out method above to see this static data returning and working as should be :'(
    //return [{id:865,issuer: {},name:"British Testing"},
    //    {id:866,issuer: {},name:"American Testing"}];
}

服务

//submit search for issuers or issuedCard
submit() {
    this.isSubmitting = true;

    this._SearchService.performSearch(this.search)
    .then(
        (resp) => {
            //e.g. [{id:1, name:'test'}]
            console.log('Search Result', resp);
            return resp;                                
        },

        (err) => {
            console.log('Error Search', err);
            this.reset(false);
            this.errors = err;
            return [];
        }
    );

    //Comment out method above to see this static data returning and working as should be :'(
    //return [{id:865,issuer: {},name:"British Testing"},
    //    {id:866,issuer: {},name:"American Testing"}];
}

performSearch(searchData) {
    console.log('Search Qry', searchData);

    let deferred = this._$q.defer();

    if(!this.isValidSearch(searchData)) {
        deferred.reject({status:400,  error: 'Bad Request', message:'invalid data'});
        return deferred.promise;
    }

    let searchURI = (searchData.type === 'car' ? 'van' : 'issuer');

    this._$http({
        url: `${this._AppConstants.api}/${this._AppConstants[searchURI]['search']}`,
        method: 'GET',
        params: {
            name: searchData.term
        }
    }).then(
        (resp) => {
            console.log('Search Data', resp);
            this.result.term = searchData.term;
            this.result.type = searchURI;
            deferred.resolve(resp.data[this._AppConstants[searchURI]['searchResp']]);

        },

        (err) => {
            console.log('Error performing search', err);
            deferred.reject(err.data);
        }
    );

    return deferred.promise;
}

你正在使用

res as res.name for res in $ctrl.submit($viewValue)

在中，在

之后出现的应该是一个数组，或数组的承诺

但事实并非如此。这是
$ctrl.submit（）
返回的内容。此方法不会返回任何内容：

submit() {
    this.isSubmitting = true;

    // no return here

    this._SearchService.performSearch(this.search)
    .then(
        (resp) => {
            //e.g. [{id:1, name:'test'}]
            console.log('Search Result', resp);
            return resp;                                
        },

        (err) => {
            console.log('Error Search', err);
            this.reset(false);
            this.errors = err;
            return [];
        }
    );

    // no return here
}

唯一的返回语句从传递给
then（）
的函数返回，并在
submit（）
方法未返回任何内容（即
未定义的
）后异步执行

因此，简而言之，你需要回报承诺：

return this._SearchService.performSearch(this.search) ...

请注意，如果您使用承诺链接而不是解析/拒绝反模式，您的服务方法可能会减少和更干净：

performSearch(searchData) {
    console.log('Search Qry', searchData);

    if(!this.isValidSearch(searchData)) {
        return $q.reject({status:400,  error: 'Bad Request', message:'invalid data'});
    }

    let searchURI = (searchData.type === 'car' ? 'van' : 'issuer');
    return this._$http.get(`${this._AppConstants.api}/${this._AppConstants[searchURI]['search']}`,   { params: {name: searchData.term) } }).then(
        resp => {
            console.log('Search Data', resp);
            this.result.term = searchData.term;
            this.result.type = searchURI;
            return resp.data[this._AppConstants[searchURI]['searchResp']]);
        }).catch(resp => {
            console.log('Error Search', err);
            this.reset(false);
            this.errors = err;
            return $q.reject([]);
        });
}

你正在使用

res as res.name for res in $ctrl.submit($viewValue)

在
中，在
之后出现的应该是一个数组，或数组的承诺

但事实并非如此。这是
$ctrl.submit（）
返回的内容。此方法不会返回任何内容：

submit() {
    this.isSubmitting = true;

    // no return here

    this._SearchService.performSearch(this.search)
    .then(
        (resp) => {
            //e.g. [{id:1, name:'test'}]
            console.log('Search Result', resp);
            return resp;                                
        },

        (err) => {
            console.log('Error Search', err);
            this.reset(false);
            this.errors = err;
            return [];
        }
    );

    // no return here
}

唯一的返回语句从传递给
then（）
的函数返回，并在
submit（）
方法未返回任何内容（即
未定义的
）后异步执行

因此，简而言之，你需要回报承诺：

return this._SearchService.performSearch(this.search) ...

请注意，如果您使用承诺链接而不是解析/拒绝反模式，您的服务方法可能会减少和更干净：

performSearch(searchData) {
    console.log('Search Qry', searchData);

    if(!this.isValidSearch(searchData)) {
        return $q.reject({status:400,  error: 'Bad Request', message:'invalid data'});
    }

    let searchURI = (searchData.type === 'car' ? 'van' : 'issuer');
    return this._$http.get(`${this._AppConstants.api}/${this._AppConstants[searchURI]['search']}`,   { params: {name: searchData.term) } }).then(
        resp => {
            console.log('Search Data', resp);
            this.result.term = searchData.term;
            this.result.type = searchURI;
            return resp.data[this._AppConstants[searchURI]['searchResp']]);
        }).catch(resp => {
            console.log('Error Search', err);
            this.reset(false);
            this.errors = err;
            return $q.reject([]);
        });
}

谢谢你的回答：）我想你还不明白返回的是什么？我可以在控制台中清楚地看到，控制器中接收到一组对象，并返回到视图中。服务返回promise
deferred.promise
，它是API结果，是对象数组
[{id:1，名称：'testing'}，{id:2，名称：'testing 2'}]
。控制器接收此承诺并通过
然后
成功/错误处理程序进行处理（省略了一些进一步的处理详细目的），并将数组返回到viewNo。它不返回数组。重读我的答案。传递给then（）的回调函数返回一个数组。但是submit（）方法不返回任何内容。而且它不可能返回数组，因为数组是使用承诺异步获取的。所以它可以（也应该）返回数组的承诺，但它没有：它什么也不返回。如果是这样的话，你的打字会很好，你就不会问你的问题了。数组打印在函数的代码中并不意味着该数组是从函数返回的。这是两件完全不同的事情。也许我不明白：/。。。谢谢您的时间，非常感谢！我是一个Java/Groovy的家伙哈哈。。。我还在想JS。我简单地将返回添加到服务方法上的控制器中，这是有效的。。。但我的脑袋不太明白为什么。你提到提交不会返回任何东西。。。为什么我从then error或success处理程序中返回的事实不算数？真不敢相信我在这个愚蠢的问题上花了多少时间：/这里有一个Java方法可以帮助您理解：
void submit（）{executor.submit（（）->{return 42；}）；}
。该方法返回void，因此不返回任何内容，对吗。但它包含一个return语句。return语句从传递给执行器的函数（在本例中是实现可调用的lambda）返回，以便该执行器稍后在不同的线程中调用该函数。这里基本上是一样的：您将一个函数传递给then（），以便稍后在服务返回的承诺得到解决时执行此函数，我写了一篇博文，解释了承诺和链接，这对很多人来说都很有帮助：谢谢你的回复：）我想你还不明白返回的是什么？我可以在控制台中清楚地看到，控制器中接收到一组对象，并返回到视图中。服务返回promise
deferred.promise
，它是API结果，是对象数组
[{id:1，名称：'testing'}，{id:2，名称：'testing 2'}]
。控制器接收此承诺并通过
然后
成功/错误处理程序进行处理（省略了一些进一步的处理详细目的），并将数组返回到viewNo。它不返回数组。重读我的答案。传递给then（）的回调函数返回一个数组。但是submit（）方法不返回任何内容。而且它不可能返回数组，因为数组是使用承诺异步获取的。所以它可以（也应该）返回数组的承诺，但它没有：它什么也不返回。如果是这样的话，你的打字会很好，你就不会问你的问题了。数组打印在函数的代码中并不意味着该数组是从函数返回的。这是两件完全不同的事情。也许我不明白：/。。。谢谢您的时间，非常感谢！我是一个Java/Groovy的家伙哈哈。。。我还在想JS。我简单地将返回添加到服务方法上的控制器中，这是有效的。。。但我的脑袋不太明白为什么。你提到那艘潜艇