Question

我将此过滤器添加到我的角应用中，以从加载的数据中删除某些字符串：

.filter('cleanteam', function () {
    return function (input) {
        return input.replace('AFC', '').replace('FC', '');
    }
});

 <h2 class="secondary-title">{{teamDetails.name |  cleanteam }}</h2>

您可以在此处看到错误：

http://alexanderlloyd.info/epl/#/teams/61

我的控制器看起来有点像这样：

  .controller('teamController', function($scope, $routeParams, footballdataAPIservice) {
    $scope.id = $routeParams.id;
    $scope.team = [];
    $scope.teamDetails = [];
    //$scope.pageClass = '';



  $scope.$on('$viewContentLoaded', function(){
      $scope.loadedClass = 'page-team';
  });



    footballdataAPIservice.getTeam($scope.id).success(function (response) {
        $scope.team = response; 
    });

    footballdataAPIservice.getTeamDetails($scope.id).success(function (response) {
        $scope.teamDetails = response; 
    });

  })

出现这种情况的原因是什么？是因为teamDetails.name未在ng-repeat循环中声明吗？

Answer 1

通过查看您的代码，似乎您没有处理未定义的情况，而您的teamDetails.name可能未定义undefined，直到从服务中获取数据。

因为当您尝试通过ajax从服务获取数据时，您的输入变量是未定义的，当过滤器代码尝试在未定义的对象上应用.replace方法时，它将永远不会工作（.replace()仅适用于字符串）< / p>

检查您的teamDetails.name对象是否定义是好的想法，因为过滤器在每个digest周期运行。

过滤

.filter('cleanteam', function () { return function (input) { return angular.isDefined(input) && input != null ? //better error handling input.replace('AFC', '').replace('FC', ''):''; } });

希望这可以帮助你，谢谢。

Answer 2

在我看来，在异步调用完成之前，过滤器正在尝试执行。

初始化控制器时尝试将teamDetails设置为null，并使用ng-if阻止在数据到达之前加载DOM元素：

$scope.id = $routeParams.id;
$scope.team = [];
$scope.teamDetails = null;

<h2 class="secondary-title" ng-if="teamDetails">{{teamDetails.name |  cleanteam }}</h2>

这将确保在异步调用填充teamDetails对象之前不会执行过滤器。

有关ng-if: https://docs.angularjs.org/api/ng/directive/ngIf

的更多信息

在AngularJS中使用过滤器时出现类型错误

2 个答案: