[Angular] Problema con dato non visibile da observable

[fermat]

non ho mai avuto tanti problemi in angular come su questo template (a questo punto penso sia il template che ha qualche impostazione che non conosco).

allora, ho questo service:

  getById(id: number): Observable<Mostra> {
    const url = 'assets/fake_data/mostre.json';
    return this.http.get<Mostra[]>(url).pipe(
      map(
        dd => dd.find(res => res.id == id)
      )
    );
  }

nel componente faccio questo:

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;

  titolo: string;

  mostra: Observable<Mostra>;

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

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

    this.titolo = 'ND';

    this.getData();
  }

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

poi nella pagina:

<p>{{mostra | async}}</p>
<p>{{titolo}}</p>

questo quello che vedo:

[object Object]
ND

dove sbaglio???

[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