1
  • 角度 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;
}
4

1 に答える 1

0

あなたが使用している

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

要するに、promise を返す必要があります。

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([]);
        });
}
于 2016-08-18T15:01:04.363 に答える