角度订阅更改不会触发视图更新

Question

我在变更检测方面遇到问题，我无法弄清楚出了什么问题，或者我只是不正确地了解Angular。 我查看了类似问题的stackoverflow答案，但是这些方法无法解决我的问题。

我有一项服务，该服务存储了我选择的两种情态组件所选择的情绪。 我有一个模式，用户可以在其中选择情绪，然后该模式使用服务来更新所选的情绪。 第二个模态还订阅选定的情感，并在接收到更新时更新其类上的情感列表。 我已经尝试了好几种方法，例如detectChanges（）和tick（）都没有用。 我知道订阅正在工作，并且模态正在接收情绪的更新列表，但是以某种方式根本无法进行更改检测，也不会触发视图更新。 我不知道为什么手动触发变更检测无法正常工作，这使我质疑我的理解。 我认为如果我在视图所依赖的类中更新this.emotions，则会触发更新。

服务：

@Injectable()
export class BeforeFormProvider {
  selectedEmotions = new BehaviorSubject({});
  selectedDistractions = new BehaviorSubject({});

  constructor(private databaseProvider: DatabaseProvider) {
  }

  updateEmotions(emotions) {
    this.selectedEmotions.next(emotions);
  }

  updateDistractions(distractions) {
    this.selectedDistractions.next(distractions);
  }

}

无法检测到更改的模态 ：我将仅包含具有更新逻辑的Class部分。 作为课堂上的一种属性，我有情感。

ngOnInit() {
    //automatically generate date/time to current for form
    this.date = this.datePipe.transform(new Date(), 'mediumDate');
    this.time = this.datePipe.transform(new Date(), 'shortTime');

    this.emotionsSubscription = this.bfProvider.selectedEmotions.subscribe(emotions => {
      this.emotions = emotions;
      this.ref.tick();
    });
    this.distractionsSubscription = this.bfProvider.selectedDistractions.subscribe(distractions => this.distractions = distractions);
  }

模态HTML： p标签不会更新，它永远不会识别任何变化！ 我不知道我在做什么错。

<ion-item detail-push (click)="openEmotionsList()">
   <h2>Emotions</h2>
   <p>{{emotions | getValues}}</p>
</ion-item>

Answer 1

我想通了。 在通过服务中的.next（）发送之前，我需要制作列表的新副本。 我在模态中保存了对通过subscribe返回的对象的引用，然后随着服务的每次更新将相同对象的变异版本发送回去，因此它不会触发视图更新。

updateEmotions(emotions) {
  this.selectedEmotions.next({...emotions});
}

Answer 2

要查看副本的getValues管道，请确保未将其设置为pure：

@Pipe({
  name: 'getValues',
  pure: false
})