1

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

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

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

<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'从一开始就包含第三人称时，一切正常，但是当我动态添加相同的第三人称时（例如通过按钮），它不会更新。

我知道如何用via观察people数组collectionObservers

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

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

4

1 回答 1

0

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

像这样的东西

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

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

但是，我建议可能为要更新的任何地方创建一个订阅者事件。也许你是一个监听角色变化的 webhook？无论你在哪里聆听/改变你都可以做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)}或一些东西。

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

于 2021-03-04T17:24:58.910 回答