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

Posted 2023-02-23

【中文标题】打字头没有填充角度用户界面

【英文标题】：typhead not populating angular ui

【发布时间】：2016-12-25 13:42:19

【问题描述】：

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

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

问题

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

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

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

服务

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;

【参考方案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([]);
        );

【讨论】：

感谢您的回复 :) 我认为您不了解返回的内容？我可以在控制台中完美地看到控制器中接收到的对象数组并返回到视图中。 example screenshot。服务返回promise deferred.promise，它是API 结果，是一个对象数组[id:1, name:'testing',id:2, name:'testing 2']。控制器通过then 成功/错误处理程序接收此承诺并处理（省略了一些进一步处理的详细目的）并将数组返回到视图

没有。它不返回数组。重新阅读我的答案。传递给 then() 的回调函数返回一个数组。但是 submit() 方法不返回任何内容。而且它不可能返回一个数组，因为该数组是使用一个承诺异步获得的。所以它可以（并且应该）返回一个数组的承诺，但它没有：它什么也不返回。如果是这样，您的预输入就可以正常工作，并且您不会问您的问题。仅仅因为一个数组被打印在一个函数的代码中并不意味着这个数组是从函数返回的。这是两个非常不同的东西。

也许我不明白：/ ...感谢您的宝贵时间，非常感谢！我是一个 Java/Groovy 人哈哈......我仍然对 JS 感兴趣。我将返回简单地添加到服务方法上的控制器中并且有效......我的脑袋只是不太明白为什么。你提到提交不返回任何东西......为什么我从当时的错误或成功处理程序中返回的事实不计数？不敢相信我在这个愚蠢的问题上花了多少时间：/

这里有一个Java方法可以帮助你理解：void submit() executor.submit(() -> return 42; );。该方法返回 void，因此它不返回任何内容，对。然而它包含一个返回语句。 return 语句从传递给执行程序的函数（在本例中为实现 Callable 的 lambda）返回，以便该执行程序稍后在不同的线程中调用该函数。这里基本上是一样的：你传递一个函数给 then()，这样这个函数会在稍后服务返回的 promise 被解析时执行，即当 http 响应返回时。

我写了一篇博客文章，解释了对许多人有帮助的承诺和链接：blog.ninja-squad.com/2015/05/28/angularjs-promises