[Angular] Problema con dato non visibile da observable

[fermat]

ho fatto una modifica:

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Mostra} from '../../../../_interfaces/mostra';
import {Opera} from '../../../../_interfaces/opera';
import {MostreService} from '../../../../_services/mostre.service';
import {Title} from '@angular/platform-browser';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-mostra',
  templateUrl: './mostra.component.html',
  styleUrls: ['./mostra.component.scss']
})

export class MostraComponent implements OnInit {

  id: string;

  mostra: Observable<Mostra>;
  mostraObj: Mostra;
  opere: Opera[];

  constructor(
    private route: ActivatedRoute,
    private titleService: Title,
    private mostreSrv: MostreService,
  ) {
  }

  ngOnInit(): void {
    this.id = this.route.snapshot.paramMap.get('id') ?? '0';

    this.getData();
  }

  getData(): void {
    this.mostra = this.mostreSrv.getById(Number(this.id));
    this.mostra = this.mostreSrv.getById(Number(this.id));
    this.mostra.subscribe(obj => {
      this.titleService.setTitle(obj.titolo);
      this.mostraObj = obj;
    });
  }
}

e nella pagina:

<p>{{mostraObj.titolo}}</p>

ora vedo il titolo corretto, ma in console mi da una serie di errori tipo questo:

ERROR TypeError: ctx.mostraObj is undefined
    MostraComponent_Template mostra.component.html:1