1

そのため、AngularJS アプリケーションに Angular Material Design の md-autocomplete ディレクティブを実装しています。コントロールに promise を送信して、クエリが完全に読み込まれていない場合でもエラーをスローしないようにしたい。また、コントロールのローディングバーを「ローディング」の合図として見ることもできます。

これは、データの読み込みが完了していないときに発生するエラーです。

TypeError: 未定義のプロパティ 'slice' を読み取れません

これは私がデータを取得する方法です：

        $http({
            method: 'GET',
            url: $rootScope.apiURL+'getAllCustomers/'+session,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).success(function(response){
            if(response.ErrorMessage === null && response.Result !== null){
                mixpanel.track("Customers loaded for POS");
                self.customers = Object.keys(response.Result).map(function (key) {return response.Result[key]});
            }
        })
        .error(function(data){
            alert('Something went wrong. Please try again.');
            mixpanel.track("Error loading customers");
        });

これが私のhtmlです：

<md-autocomplete
        ng-disabled="ctrl.isDisabled"
        md-no-cache="ctrl.noCache"
        md-selected-item="ctrl.selectedItem"
        md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
        md-search-text="ctrl.searchText"
        md-selected-item-change="ctrl.selectedItemChange(item)"
        md-items="item in ctrl.querySearch(ctrl.searchText)"
        md-item-text="item.Name"
        md-min-length="0"
        placeholder="Buscar Cliente">
    <md-item-template>
        <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.Name}}</span>
    </md-item-template>
    <md-not-found>
        No states matching "{{ctrl.searchText}}" were found.
        <a ng-click="ctrl.newCustomer(ctrl.searchText)">Create a new one!</a>
    </md-not-found>
</md-autocomplete>

クエリを処理する関数は次のとおりです。

function querySearch (query) {
    var results = query ? self.customers.filter( createFilterFor(query) ) : self.customers.slice(0, 50),
        deferred;
    return results;
}

function createFilterFor(query) {
    var lowercaseQuery = angular.lowercase(query);
    return function filterFn(customer) {
        return (customer.Name.toLowerCase().indexOf(lowercaseQuery) === 0);
    };
}

ありがとう！

4

1 に答える 1

0

問題のコードを関数にラップします。

function foo()
  {
  return foo.self.customers.slice(0, 50);
  }

foo.self = self;

次に、ステートメントを次のように変更します。

var results = query ? self.customers.filter( createFilterFor(query) ) : foo

そして、テンプレートの型チェックを 3 項ロジックとして実行します。

(typeof ctrl.querySearch(ctrl.searchText) === "function") ? item in ctrl.querySearch(ctrl.searchText)() : item in ctrl.querySearch(ctrl.searchText)

参考文献

于 2016-01-21T20:22:16.590 に答える