角形サブスクリプションの変更でビューの更新がトリガーされない

Question

変更検出に問題があり、何がうまくいかないか、または角度が正しく分かりません。私は同様の問題のstackoverflow答えを見たが、メソッドは私の問題を解決しませんでした。

私は2つのモーダルコンポーネントを購読している感情の選択肢を格納しているサービスを持っています。ユーザーが感情を選択するモーダルが1つあり、モーダルはそのサービスを使用して選択した感情を更新します。 2番目のモーダルは選択された感情にも加入し、更新を受け取ったときにクラスの感情のリストを更新します。私は、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); 
    } 

} 

変化検出が動作していないモーダル：私は、更新ロジックを持っているクラスの部分だけを含めるつもりです。私はクラスのプロパティとして感情を持っています。

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（）経由で送信する前に、リストの新しいコピーを作る必要がありました。 Modalsでsubscribeを介して返されたオブジェクトへの参照を保存していて、サービスからのすべての更新で同じオブジェクトの変更されたバージョンを送信したため、ビューの更新がトリガーされませんでした。

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

Answer 2

代わりにコピーを作成する、それは純粋に設定されていないことを確認してください、あなたにgetValuesパイプを見て：

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