1. ホーム
  2. javascript

[解決済み] AngularJSで「未定義のプロパティ 'slice'を読み取れません」というカスタムフィルタが発生する。

2022-02-18 22:02:06

質問

私のカスタム startFrom フィルタがエラーを発生させます。

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

app.controller("PostCtrl", function($scope, $http) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.hidePagination = true;

$scope.search = function() {
    $http.get('someurl').then(sucesscalback,errorcalback);
    function sucesscalback(response)
    {
        $scope.hidePagination = false;
        console.log("Success:");
        console.log(response.data.records);
        $scope.posts = response.data;
        $scope.numberOfPages=Math.ceil($scope.posts.records.length/$scope.pageSize); 
        alert($scope.numberOfPages);
    }
    function errorcalback(failure)
    {
        console.log("Error:");
        console.log(failure);
    }

解決方法は?

入力が存在するかどうかをフィルターでチェックする必要があります。

app.filter('startFrom', function() {
    return function(input, start) {
        if (!input || !input.length) { return; }
        start = +start; //parse to int
        return input.slice(start);
    }
});

そうでなければ、フィルター関数が実行され、その結果 slice について undefined というプロパティを持たない slice 配列や文字列のように

値がないときにフィルタが呼ばれるのは、Angularが最初の $digest サイクルになります。コントローラで初期値を追加することでこのエラーを回避することもできますが、単に if ステートメントをフィルターに追加します。

両方のソリューションのデモを紹介します。 エラーがないことに注意してください。