如何订阅可观察对象上角度模型的变化？

Question

我正在通过 http 加载项目列表，并使用BehaviorSubject 将更新从角度服务流式传输到组件。这些项目有一个布尔值，它绑定到一个复选框。

我希望另一个组件使用相同的服务并订阅相同的数据源，但只显示选中的项目。当初始数据加载时，下面的代码可以正常工作。但是，如果选中第一个组件中的复选框，则不会更新第二个组件。

我是否需要在检查时手动更新第一个组件中的对象并将其推回到观察者中？

stackblitz 上的完整示例在这里

export class MyService {

    private mySubject = new BehaviorSubject<MyModel[]>([]);

    allObservable: Observable<MyModel[]>  = this.mySubject.asObservable();

    selectedObservable = this.allObservable.pipe(map(result => result.filter(f => f.selected)));

    constructor() {
        this.fundsSubject.next([
          { selected: true },
          { selected: false },
        ]);
    }
}

export class MyModel {

  public selected: boolean = false;

}

Answer 1

即使您对 中进行更改data，AppComponent您MyService也不会意识到该更改。因此，它不会向订阅者推送新数据。

要使其知道更改，只需对以下文件进行以下更改：

应用程序组件模板：

<ul>
  <li *ngFor="let row of data">
     <input (change)="onChange()" type="checkbox" [(ngModel)]="row.selected"/> {{row.name}} 
    </li>
</ul>
<hr/>
Selected:
<hello></hello>

这个变化实际上会监听到变化data。请注意(change)添加到input标记的处理程序。

应用程序组件类：

import { Component, OnInit } from '@angular/core';
import { MyService, MyModel } from './service.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  
  data: MyModel[];

  constructor(private myService : MyService){}
  
  ngOnInit() {
    this.myService.allObservable.subscribe(d => this.data = d);
  }

  onChange() {
    this.myService.setUpdatedData(this.data);
  }

}

此更改将通过调用服务将更改传播到服务setUpdatedData。

并将此方法添加到MyService：

setUpdatedData(data) {
  this.mySubject.next(data);
}

此更改会将更改传播到所有subscribers。

这是一个工作 StackBlitz 示例供您参考。