Observable not updating display

@danwhuy wrote:

I have a pretty simple layout that should be dynamically changing the "title" of the page with an observable. It is a small chat app that I am building to help myself learn the platform and all that, but my title never updates and I can't seem to find out why. I tried posting my question to stack overflow, but no one was able to help, so I thought I would try in here. I am using ionic Auth and services to login users and handle authorization. So when a person clicks on another user they can go into private chat with that user, and the page title should show "USERNAME - Chat", but it always only shows " - Chat". Here is the code I have for it...

PrivateChat.ts...

import { Component, NgZone, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SettingsProvider } from '../../providers/settings/settings';
import { ChatProvider } from '../../providers/chat/chat';
import { ChatMessage } from '../../models/chat-message';
import { User } from '@ionic/cloud-angular';
import { DataProvider } from '../../providers/data/data';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import PouchDB from 'pouchdb';

@IonicPage()
@Component({
  selector: 'page-private-chat',
  templateUrl: 'private-chat.html'
})
export class PrivateChatPage {

  chat_user = new Subject();
  person: any;
  user_id: any;

  constructor(...) {
    this.user_id = this.navParams.get('user_id');
    this.getChatUser().subscribe(data => {
      console.log("setting this.person to");
      console.log(data);
      this.person = data;
    });
  }
  getChatUser() {
    this.retrieveUser();
    return this.chat_user;
  }
  retrieveUser() {
    this.data.getUser(this.chat_user).then(data => {
      this.chat_user.next(data);
    });
  }
}

Super simple, obviously I omitted some code to save time and space. Then my html page is...

private-chat.html

<ion-header>

  <ion-navbar>
      <ion-title text-center>{{person?.details.username}} - Chat</ion-title>
  </ion-navbar>

</ion-header>


<ion-content #chat id="chat">
  <ion-list no-lines>
    <ion-item *ngFor="let message of messages">
        <div class="animate-in-secondary">
            <p><strong>{{message.from}}: </strong>{{message.message}}</p>
        </div>
    </ion-item>
  </ion-list>
  <ion-fab right bottom>
    <button ion-fab color="dark">
        <ion-icon name="arrow-dropup"></ion-icon>
    </button>
  </ion-fab>

</ion-content>

<ion-footer>
  <ion-textarea [(ngModel)]="chatBox" fz-elastic type="text" placeholder="enter message..."></ion-textarea>
  <button class="absolute-comment-button" ion-button icon-only small (click)="send(chatBox)">
    <ion-icon name="chatbubbles"></ion-icon>

  </button>
</ion-footer>

Super simple. Yet the title of the page never updates. it always just says "Chat" I open up the dev tools and I see all the console logs are happening perfectly. I get the console.log("setting this.person to"); with the correct data in the console, so I know the subscribe event is firing and setting the "this.person" to the correct data. No matter what though, the page always just has a title of "Chat". Can anyone see why this would not be updating the title?

If anyone is curious the "this.data.getUser(this.chat_user)..." just makes an API call to my server which call the api.ionic.io/users/{{USER_ID}} API and returns the data, which is being returned correctly as I can see it in the console.

Thank you in advance for any help, this is making no sense and I can't figure out why the title isn't updating. Thank you.

P.S. If you need more of the code please ask, I will post up whatever is necessary to get this figured out. Thank you.

Also, just to make sure you have any info, here is the console output when I load the page...

setting this.person to
Object {
  app_id:"REMOVED"
  created:"2017-06-03T15:31:38Z"
  custom:Object
  details:Object
    email:"REMOVED"
    image:"REMOVED"
    name:"REMOVED"
    username:"REMOVED"
  __proto__:Object

Posts: 1

Participants: 1

Read full topic