在 Angular 5 中根据用户输入更新 BehaviorSubject

【问题标题】：Updating an BehaviorSubject based on User Input in Angular 5在 Angular 5 中根据用户输入更新 BehaviorSubject
【发布时间】：2018-03-14 01:31:07
【问题描述】：

我有一些表的默认数据，该表由服务获取并存储在 behaviorSubject 中。用户可以选择通过在表单中输入字段来向表中添加更多行。如何更新 Observable 以包含用户创建的数据？或者有没有更好的方法来更新数据？

我试图获取当前 b.s. 的值。并连接新项目，然后使用 next() 更新 b.s.但我无法让它工作。

编辑

vincecampanale 有一些优点并帮助我移动代码，但现在我只是得到一个“currentItems.concat 不是函数错误”，即使它被初始化为一个数组，我还缺少什么？

更新代码：

defaults = this.http.get(this.url);

private defaultItems = new BehaviorSubject<any>(this.defaults);
items = this.defaultItems.asObservable();

addItem(item: object) {
    let currentItems = [];
    currentItems = this.defaultItems.getValue();
    let updatedItems = currentItems.concat(item);
    this.defaultItems.next(updatedItems);
}

【问题讨论】：

您不应该在next() 方法中提供updatedItems 变量而不是product？

标签： angular observable behaviorsubject

【解决方案1】：

defaultItems 属性包含一个产品数组，因此将包含新产品之外的默认项目的数组传递给它，在您的示例中为 updatedItems：

this.defaultItems.next(updatedItems);

另外，Array.push 返回新数组的length，而不是数组本身。使用Array.concat 获取将product 与currentItems 相加得到的数组：

let updatedItems = currentItems.concat(item);

最后，该方法似乎应该将参数 item 添加到数组中，而不是 product。

应用了这些更改的新 addItem 方法：

addItem(item: object) {
  let currentItems = this.defaultItems.getValue();
  let updatedItems = currentItems.concat(item);
  this.defaultItems.next(item);
}

【讨论】：