如何使用 Aurelia 观察数组内的数组？

如何解决如何使用 Aurelia 观察数组内的数组？

我有一个 people 对象数组，其中每个对象（代表一个人）包含一个 roles 数组：

@observable people = [
  {
    name: 'Name1',roles: [
      '1','2'
    ]
  },{
    name: 'Name2',roles: [
      '3','4'
    ]
  }
]

我希望视图遍历并显示它们（例如 repeat.for="role of roles"）。但是，当 people 数组更新时，视图不会更新。 Angular 选项对我不起作用的示例代码：

<select name="roles" multiple class="ui fluid multiple dropdown">
  <option value="">Roles</option>
  <option selected.bind="accounts[2].roles.includes('1')" value="angular">Angular</option>
  <option value="css">CSS</option>
  <option value="design">Graphic Design</option>
  <option value="ember">Ember</option>
</select>

当我初始化 people 数组以包含从一开始带有 role '1' 的第三人称时一切正常，但是当我动态添加相同的第三人时（例如通过按钮）它不是更新了。

我知道如何通过 people 观察 collectionObservers 数组

this.subscription = this.bindingEngine.collectionObserver(this.people)
  .subscribe(this.peopleChanged.bind(this))

但我对整个 this.people 数组不感兴趣，而是对 nested 数组 roles 数组 inside this.people 感兴趣。如何解决使用观察者观察数组内的数组的问题？

解决方法

我不推荐的东西，但是可以通过简单地迭代和单独绑定来实现。无论如何，我都知道没有顶级绑定函数允许您绑定数组的嵌套数组。

像这样

（这是观察角色数组中的特定属性 - 可以轻松更改它以对每个角色使用 collectionObserver。）

 bindNestedArrayItems() {
        for (const person of people) {
            for (const role of person.roles) {
                this.bindingEngine
                    .propertyObserver(property,'property')
                    .subscribe(() => this.peopleChanged(this));
            }
        }
 }

不过，我建议可以为更新的任何地方创建一个订阅者事件。也许您是一个可以侦听角色更改的网络钩子？无论您在哪里聆听/改变，您都可以做 this.eventAggregator.publish('role-updated',{user: user}) 然后有一个 this.eventAggregator.subscribe('role-updated',(data) => { if (data.user) { let userThatUpdated = this.person.find(x => x.Id === data.user.id)} 或其他东西。

这样你就知道发生了什么事，而且你没有一百个财产/收藏观察员。