update
This issue is linked to my @Input monitoring a nested/array instead of a primitive. It only fires the setter when the references is changed.
- Quick&dirty fix:
Create a new nested/array whenever sending it down the pipe:
this._myBehaviorSubject$.next(.this._myBehaviorSubject.getValue().map( entry => entry))
- Better approach: SO discussion
original question This Ionic 3 / Angular app has a page displaying data from an RxJS observable:
<ion-content padding>
<ion-item>
Entry count: {{ (journalService.timelineEntries$ | async)?.length }}
</ion-item>
<journal-evo-graph [values]="(journalService.timelineEntries$ | async)"></journal-evo-graph>
</ion-content>
The Entry count printout is just a means of testing that the timelineEntries$ stream is properly feeding the right amount of entries.
The journal-evo-graph is a plain NV-D3 graph to render these values. However, the values need to be transformed to be compatible with the graph.
The problem is when the timelineEntries$ values should be obtained.
My journal-evo-graph component has an @Input property as follows:
export class JournalEvoGraphComponent {
private _entries: TimelineEntry[];
@Input('values')
get values() { return this._entries; }
set values(entries: TimelineEntry[]) {
console.log('inbound values ' + entries && entries.length); // stays at 0 even though it fires multiple times
if(entries && entries.length > 0) {
this.processTimelineEntries(entries)
}
else console.log('no values received.');
}
graphOptions:any;
data: any[];
constructor() {
this.initGraphOptions();
this.initTestData();
}
I can't identify why this component keeps receiving an empty array while the Entry count: printout just displays the right amount.
Any leads welcome :-)
