Observable not updating display

Ionic Framework ionic-v3
1

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
2

If you stop using any, and start using types like Observable<Person> then your error will be much easier to trace.

3

I can try that, but Person isn’t any type of class or anything, it would just be a string. The Observable is put in place because I have to call out to the api.ionic.io to get the username of the person they will be chatting with, so I can’t set the string until after that request is returned. I guess I could change the person variable to …

person: Observable;

But do you think that will make the page update the name correctly?

4

No it won’t. But you’re more likely to turn a runtime issue into a compile time error. Though your answer confuses me, because it looks as though person refers to an object.

5

I will set it to Observable in my code, just to be safe, but person is just saved to the json that gets returned when you call the api.ionic.io with http.get
In the code, the “this.data.getUser(this.chat_user).then(data => {” is just an http.get request to https://api.ionic.io/users/{userID}
Here is the function…

getUser(user_id) {
    return new Promise(resolve => {
      let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      this.internalGetToken().then(data => {
        headers.append('Authorization', 'Bearer ' + data);
        this.http.post(this.provider + '/user', {user_id: user_id}, {headers: headers}).map(res => res.json()).subscribe(data => {
          resolve(data);
        })
      })
    })
  }
6

You could try subscribing to the observable in the template using the async pipe?

<ion-title text-center>{{(chat_user | async)?.details.username}} - Chat</ion-title>

7

Why do you have what appears to be the same data in two different places: chat_user and person? That’s just begging for bugs when they get out of sync.