绑定到可观察数组答案

【问题标题】：Binding to observable array绑定到可观察数组
【发布时间】：2017-07-26 09:06:31
【问题描述】：

好的，请有人帮我，我觉得我快疯了！！！

我在 angular2 中获取更新列表时遇到问题，从环顾四周看来我应该使用某种 Observables？

听起来不错，但我在实施它们时遇到了很多问题。

我需要有关如何使用可观察数组并在 angular2 中绑定到它的帮助，以及使用可观察数组有什么好处？

例如，我有一个模型中的 cmets 列表

  this.comments = new Array<IComment>;
  this.observableComments = Observable.from(this.comments);
  // Note what is really odd with the above is typescript thinks 
  // the above is Observable<IComment> ??? not Observable<IComment[]>
  // but when i debug it is ObservableArray with array property - ??

我的模板中有以下 div

 &lt;div *ngFor="let comment of comments | async | reverseOrder let i = index" &gt;

到目前为止还不错，但似乎没有能力用我的 observable 推送或执行 onNext ?!??!!

我有一个名为 addComment 的函数。我要做的就是向我的可观察数组添加一个值，以便我的 UI 更新。我这里没有使用任何数据服务..

addComment(comment: IComment) {
  this.comments.push(comment);
  this.observableComments.onNext(this.comments);
  // The above does not work
  // neither onNext - next - push is a function on my observable array??
}

我已经进行了大量搜索，并且有使用 Rx 主题和行为主题的建议，但没有关于如何在我的 UI 中绑定到这些的示例。我知道这些是流，但我无法理解这将如何与我的管道一起使用，并且再次订购没有这样的例子

如果我直接绑定到我的数组 Angular2 不会检测到推送的变化，因为它是相同的引用。

其他建议是根本不使用可观察对象，只需执行 array.concat 来创建一个新数组和一个新引用。这对我来说似乎很疯狂！！！

ObservableArrays 对我来说似乎毫无意义，我没有得到什么？他们当然不会观察数组，允许我设置新的数组值或给我任何推入数组的能力。

【问题讨论】：

你的组件有 onPush 变化检测吗？ Observable 不能像 onNext 一样发出事件。您应该使用主题或行为主题。使用 Observable，您可以在再次添加后尝试调用this.observableComments = Observable.from(this.comments);
不，不使用 onPush，我可以通过订阅事件并使用 changedDetectorRef 和更改数组的引用来更新它。但我不了解 observables 以及使用它们的优势
这是在服务github.com/jhades/angular2-rxjs-observable-data-services/blob/…中使用 BehaviorSubject 的示例
@yurzui。是的，如前所述，这个（主题）是我所看到的建议，但我没有成功，因为我的模板似乎不喜欢枚举主题，即使我让它工作，我的排序管道也会像流一样工作吗？
我会在你的情况下省略使用 observable 和 async 。 stackoverflow.com/questions/39757603/… 所以我会将push 替换为concat 或spread 运算符

标签： angular rxjs

【解决方案1】：

你可以试试这个方法：

private comments: IComment[];
private observableComments: BehaviorSubject<IComment[]>;  

constructor() {
  this.comments = new Array<IComment>;  
  this.observableComments = <BehaviorSubject<IComment[]>>new BehaviorSubject([]);
}

get comments() {
  return this.observableComments.asObservable();
}

addComment(comment: IComment) {
  this.comments.push(comment);
  this.observableComments.next(Object.assign({}, this.comments));
}

【讨论】：

@Annan A. 谢谢 - 这看起来更接近我想要的。 Object.assign 与仅传递 this.cmets 相比有什么好处？
这是功能性更强的方法的一部分，试图保持状态不可变——传递副本而不是引用。
你不应该使用Object.assign([], this.comments)