绑定到可观察数组

时间:2017-03-06 13:13:58

标签: angular rxjs

好的,请有人请在这里帮助我,我觉得我疯了!

我在使用angular2更新列表时遇到问题,从环顾四周来看,我应该使用某种Observables吗?

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

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

例如,我在模型中有一个评论列表

  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

&#13;
&#13;
 <div *ngFor="let comment of comments | async | reverseOrder let i = index" >
&#13;
&#13;
&#13;

好了到目前为止这么好但似乎没有能力用我的观察力推动或做一个onNext?!?? !!

我有一个名为addComment的函数。我想要做的就是为我的observable数组添加一个值,以便我的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不会检测推送的更改,因为它是相同的引用。

其他建议是根本不使用observables,只需使用array.concat创建一个新数组和一个新引用。这对我来说似乎很疯狂!!!

ObservableArrays对我来说似乎毫无意义我没有得到什么?他们当然不会观察数组,允许我设置一个新的数组值或者给我任何能够推进阵列的能力。

1 个答案:

答案 0 :(得分:2)

您可以尝试这种方法:

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));
}