Question

我正在尝试在Angular Service中观察数组集合的变化，但似乎无法弄清楚如何在Angular 5中做到这一点。基本上，我正在寻找与{{1} }，我们以前在AngularJS中使用过，它很脏，我知道。

我想检测服务中的更改，所以我认为我不能或不应该使用$watchCollection。另外，我要监视更改的数组也是对象内部的属性。我在服务中拥有的引用是@Input（this.columnDefinition.collection是对象数组）。基本上，如果我将一个新对象推送到collection数组中，我想检测它并执行其他操作。

我尝试使用collection和IterableDiffers，但是当DoCheck数组更改时，这似乎没有检测到或触发。

我也尝试在数组上使用collection（与Observable.of一起使用，但这仅在第一次执行）

RxJS 5

我以为我可以使用const observer = Observable.of(this.columnDefinition.collection); observer.subscribe((col) => console.log(col))，但是从ES6考虑中删除了，所以也从ofArrayChanges起删除了

我还尝试不使用RxJS 5来执行此操作，因为我希望用户仅操作数组。他们不应该知道附有观察者

如果将我与Aurelia框架进行比较，我可以使用以下内容来做到这一点

Subject

并且有效，这里没有什么幻想。

编辑

只需澄清一下，问题更多，这是否可以完成而无需任何特殊功能或对数组进行任何更改？我知道我可以使用this.bindingEngine .collectionObserver(this.columnDefinition.collection) .subscribe((changes: { index: number, addedCount: number, removed: any[] }[]) => { console.log('changes ', changes); console.log('updated collection', this.columnDefinition.collection); });和Subject来做到这一点，但我正在努力避免这种情况（如果可能）。我希望用户仍然使用常规数组next，push，pop，...如果Aurelia可以做到，那么在Angular中也可以吗？ ...它曾经在AngularJS中使用slice，所以在Angular 5中是否具有等效功能？

Answer 1

因为数组正在使用引用

this.columnDefinition.collection.push(// something);

这当然会影响数组中的数据，但是在这种情况下，reference的{{1}}不会更改。
因此，如果希望订阅可观察对象的其他组件通知更改，则还应该更改collection本身。

例如：
服务：

reference

组件：

private collections: Collection[];//the data that will be emit
private collectionsSubject: BehaviorSubject<Collection[]>;//The subject to emit data
collections$: Observable<Collection[]>;//The public observable that other components will subscribe to
constructor() {
  this.collections = [];
  this.collectionsSubject = new BehaviorSubject<Collection[]>(this.collections);

  this.collections$ = this.collectionsSubject.asObservable();
}


//When ever other place all to this service to add new collection emit new data with new reference

addCollection(collection: Collection) {
  this.collections.push(collection);
  //Here we will renew the reference and passing it to others component using spread operator
  this.fetchOptionsSubject.next([...this.collections]);
}

您可以了解有关Spread syntax

的更多信息

如何在服务中的Angular 5中观看集合更改

1 个答案: