typhead不填充角UI

Question

• 角1.5.8
• 引導3.3.7（CSS）
• 角的UI 2.0.2

使用角度預輸入（ui.bootstrap.typeahead）需要的對象的列表其將在UI組件與HTML

問題顯示

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