打字头未填充 angular ui

Question

• Angular 1.5.8
• Bootstrap 3.3.7 (CSS)
• Angular-ui 2.0.2

使用 angular Typeahead (ui.bootstrap.typeahead) requires 对象列表，它将显示在 ui 组件中 HTML

问题

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

2. Controller 函数使用从服务返回的 promise 并执行 then 逻辑和 returns 对象的 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后面的应该是数组，或者数组的promise。

但事实并非如此。这是 return 由 $ctrl.submit() 编辑的内容。而这个方法没有 return 任何东西：

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 语句 return 传递给 then()，并在 submit() 之后 异步执行 ] 方法没有 returned 任何内容（即 undefined）。

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

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

请注意，如果您使用承诺链而不是 resolve/reject 反模式：

，您的服务方法可能会减少并且更清晰

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