Angular 组件绑定但没有数据传输

Question

我的页面中有两个组件。组件 A 称为 Dashboard 并通过 ng-repeat 包含一个元素列表，我们称它为 systems。每个系统都将通过组件 B 显示，该组件专门用于此系统元素，称为 SystemView。每个系统视图都有一个日志条目列表，我现在想要的是显示一个带有未读日志条目数量的徽章。如果我打开一个系统条目，我可以设置一个日志条目来读取，那么未读日志条目的数量应该会改变。为了您的理解：system.logEntries 是一个日志条目列表。

HTML

<some-accordion-control>
  <div ng-repeat="system in systems">
    <h3>{{system.name}} <span class="badge">{{system.unreadLogEntries}} of {{system.logEntries.length}}</span>
    <system-view system="system"></system-view>
  </div>
</some-accordion-control>

JS SystemView 控制器

module.exports = {
  template: 'some.html',
  controller: SystemView,
  bindings: {
    system: '<'
  }
};

function SystemView() {
    // ... some code
}

SystemView.prototype = {
  setRead: function () {
    // this is an example that i change the value of unreadLogEntries
    // this did not work in the dashboard component
    system.unreadLogEntries--;
    // i tried this and it worked in the dashboard component
    system.logEntries.push({
      message: "Hello World!"
    });
  }
};

我的问题是，日志条目列表可能会更改并获取有关其值的新信息。但是简单的整型字段unreadLogEntries不行。

有人可以帮我吗？

Answer 1

好的，我做了以下操作：

我删除了 unreadLogEntries 字段并添加了一个控制器函数来计算附加的日志条目列表中的未读日志条目。

这个在HTML：

<span class="badge">{{$ctrl.countUnread(system.logEntries)}} of {{system.logEntries.length}}</span>

作为我控制器的一部分：

SystemView.prototype = {
  setRead: function () {
    // ...
  },

  countUnread: function (logEntries) {
    var unread = 0;
    for(var i = 0; i < logEntries.length; i++) {
      if(logEntries[i].isUnread) { unread++; }
    }
    return unread;
  }
};

这对我有用。也许有更好的解决方案，但这解决了我的问题。

Angular 组件绑定但没有数据传输

Angular component binding but no data transfer

angularjs

angular-components