在ng-repeat使用的角度滤波函数中，`this`未定义

I'm trying to filter an an array in the dom that uses ng-repeat. The filter works when I hard code the return, but when I try to use this, it gives me the error

我正在尝试过滤使用ng-repeat的dom中的数组。当我对返回进行硬编码时，过滤器有效，但是当我尝试使用它时，它会给我错误

Cannot read property minHeight of undefined.

无法读取未定义的属性minHeight。

So for some reason this is undefined, but it works in other functions in the controller. I'm not sure why it doesn't work in the filter.

因此，由于某些原因，这是未定义的，但它适用于控制器中的其他功能。我不确定为什么它在过滤器中不起作用。

I'm sure I'm missing something ridiculously simple, but I cannot find it

我确定我错过了一些荒谬简单的东西，但我找不到它

Controller

调节器

export class ItemComponent {

    /*@ngInject*/
    constructor($http) {
        this.$http = $http;
        this.minHeight = 0;
    }

   filter(row){
       console.log(this.minHeight);
       return row.minHeight > this.minHeight;
   }

HTML

HTML

ng-repeat="item in itemCtrl.items | filter: itemCtrl.filter"

Transpiled Code (from app.bundle.js in browser)

透明代码（来自浏览器中的app.bundle.js）

var ItemsComponent = exports.ItemsComponent = function () {
  /*@ngInject*/
  ItemsComponent.$inject = ['$http'];
  function ItemsComponent($http) {
    _classCallCheck(this, ItemsComponent);

    this.$http = $http;
    this.minHeight = 0;
  }

  _createClass(ItemsComponent, [{
    key: '$onInit',
    value: function $onInit() {
      this.loadItems();
    }
  }, {
    key: 'loaditems',
    value: function loadItems() {
      var _this = this;

      this.$http.get('/api/items').then(function (res) {
        _this.items = res.data;
        console.log(_this.items);
      }).catch(function (err) {
        console.log(err);
      });
    }
  }, {
    key: 'filter',
    value: function filter(row) {
      console.log(this.minHeight);

      return row.minHeight > 3;
    }
  }]);

  return ItemsComponent;
}();

2 个解决方案

#1

I'm pretty sure this is not the best approach, but since there is no answer and I could solve my problem this way, I will share it with you.

我很确定这不是最好的方法，但由于没有答案，我可以用这种方式解决我的问题，我会与你分享。

There is no this context in the filter function when called on ng-repeat (why?), so I solved it binding the context and getting the controller context from the this context.

在ng-repeat（为什么？）上调用filter函数时没有这个上下文，所以我解决了它绑定上下文并从这个上下文中获取控制器上下文的问题。

HTML

ng-repeat="item in itemCtrl.items | filter: itemCtrl.filter.bind(this)"

Controller

filter(row) {
  console.log(this.itemCtrl.minHeight);
}

#2

Looks like you figured this out, but if you didn't want to bind in the template file, and I prefer to put as little as possible in the template file, you could bind in your class definition in the constructor.

看起来你想出来了，但是如果你不想在模板文件中绑定，并且我更喜欢在模板文件中尽可能少地放置，你可以在构造函数中绑定类定义。

For example:

例如：

export class ItemComponent {
    /*@ngInject*/
    constructor($http) {
        this.$http = $http;
        this.minHeight = 0;

        // arrow function will bind the 'this' you need, or you could use '.bind' instead
        this.filter = (row) => {
            console.log(this.minHeight);
            return row.minHeight > this.minHeight;
       }
    }