打字头没有填充角度用户界面

Question

• Angular 1.5.8
• 引导程序 3.3.7 (CSS)
• Angular-ui 2.0.2

使用 angular Typeahead (ui.bootstrap.typeahead) 需要一个对象列表，它将在带有 HTML 的 ui 组件中显示

问题

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

2. 控制器函数使用从服务返回的promise并执行then逻辑并返回对象的array

3. Typeahead 不处理阵列...执行控制台日志，您可以看到阵列。

4. 如果我不使用使用服务方法静态传递相同的对象数组，则该功能可以正常工作

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"}];
}

服务

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;
}

Answer 1

你正在使用

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

in 之后的应该是一个数组，或者是一个数组的承诺。

但事实并非如此。这是$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
}

唯一的 return 语句从传递给 then() 的函数返回，并在submit() 方法没有返回任何内容（即undefined）之后异步执行。

所以，简而言之，您需要返回承诺：

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([]);
        });
}