title: Using observables in Angular 2 / Ionic app
body: <p>I am having trouble with my observables.  I am attempting to display comments using the <code>async</code> pipe:</p>
  
  <pre><code>&lt;p *ngFor="let comment of client_comments$ | async"&gt;
    {{ comment }}
  &lt;/p&gt;
  </code></pre>
  
  <p>and I initialize <code>comments$</code> as follows:</p>
  
  <pre><code>// Ionic lifecycle hook for view loading
  ionViewWillEnter() {
      this.client_comments$ = this.commentService.getClientComments()
  }
  </code></pre>
  
  <p>and the service looks like:</p>
  
  <pre><code>@Injectable()
  export class CommentsProvider implements OnInit {
  
    private client_comments  = new BehaviorSubject([]);
    client_comments$: Observable&lt;any[]&gt;
  
    constructor(private clientService: ClientService) {
      this.client$ = this.clientService.clientStream$
      this.client$.subscribe( client =&gt; {
        this.client = client
      })
    }
  
    initializeClientComments() {
      let client_comments = _.orderBy(this.client.comments, 'created_at', 'desc')
      this.client_comments$ = this.client_comments.asObservable()
      this.client_comments.next(client_comments)
    }
  
    addComment(comment) {
      let clientCommentArray = _.cloneDeep(this.client_comments.getValue())
      clientCommentArray.unshift(comment)
      this.client_comments.next(clientCommentArray)
    }
  
    getClientComments() : Observable&lt;any[]&gt; {
      this.initializeClientComments()
      return this.client_comments$
    }
  }
  </code></pre>
  
  <p>When I add a comment, the value does not persist, I believe due to the call to <code>initializeClientComments()</code> because when I change <code>getClientComments()</code> to:</p>
  
  <pre><code>getClientComments() : Observable&lt;any[]&gt; {
    if (_.isEmpty(this.client_comments.getValue())) {this.initializeClientComments()}
    return this.client_comments$
  }
  </code></pre>
  
  <p>the comment array is updated as expected.  But when I use the updated <code>getClientComments()</code>, and change from one client to another client, the view will show the first client's comments and will not change with the client.  I am thinking the constructor is not firing, causing no update in the client.  </p>
  
  <p>Client Service:</p>
  
  <pre><code>@Injectable()
  export class ClientService implements OnInit {
  
    private client = new BehaviorSubject("");
    clientStream$ = this.client.asObservable();
  
      constructor (private http: Http, private toastCtrl: ToastController, public storage: Storage, private app: App, private emailComposer: EmailComposer, private platform: Platform, private globalVarService: GlobalVariablesProvider) {}
  
    setClient(new_client) {
      this.client.next(new_client)
    }
  }
  </code></pre>
  
  <p>How should I refactor this to allow the comment stream to remain in sync?</p>