typescript - ANGULAR: No puedo hacer que mis datos se muestren en mi archivo HTML

Estoy obteniendo el placeholder de JSON de la API y estoy tratando de obtener una página que coincida con el ID de la ruta en el objeto. Al registrar todo en la consola, parece que funciona; cuando navego a la página específica, el objeto con el ID coincidente aparece en mi consola, pero cuando intento poner los datos en mi HTML, simplemente no aparecen. Y no obtengo errores. Captura de pantalla de la página

//SERVICE FILE//
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Stream } from './stream';
import { Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class StreamService{

constructor(private http: HttpClient) { }

getStream():Observable<Stream[]>{
  return this.http.get<Stream[]>("https://jsonplaceholder.typicode.com/albums/1/photos");
  }

getLiveStream(id: number): Observable<Stream> {
  const url = `https://jsonplaceholder.typicode.com/albums/1/photos?id=${id}`;
  return this.http.get<Stream>(url);
  }
}

//TS FILE//
import { Component, OnInit } from '@angular/core';
import { StreamService } from '../stream.service';
import { DomSanitizer } from '@angular/platform-browser';
import {ActivatedRoute} from '@angular/router';
import { Stream } from '../stream';

@Component({
  selector: 'app-livestream',
  templateUrl: './livestream.component.html',
  styleUrls: ['./livestream.component.scss']
})
export class LivestreamComponent implements OnInit {
  liveStream!: Stream;

  constructor(
    private streamService: StreamService, 
    private sanitizer: DomSanitizer, 
    private route: ActivatedRoute, 
    ) { }

    //is voor de "sanitizing unsafe style value url" error te vermijden//
    public getSantizeUrl(url : string) {
      return this.sanitizer.bypassSecurityTrustUrl(url);
  }

  ngOnInit() { 
    this.getLiveStream();

  }
      getLiveStream():void{
        const id = Number(this.route.snapshot.paramMap.get('id'));
        this.streamService.getLiveStream(id).subscribe(liveStream =>{
            this.liveStream = liveStream;
            console.log(this.liveStream);
        })
      }


    
    
}

//INTERFACE FILE
export interface Stream {
  id: number;
  title: string;
  url: string;
  thumbnailUrl: string;
}

// HTML FILE
<div class="container">
  <h3>Livestream</h3>
  <div>
     <h4> {{liveStream?.title}} </h4>
  </div>
</div>

Respuesta #1

Como se establece en otra respuesta, lo que recibes es un arreglo con un objeto. Yo extraería el objeto del arreglo y también me gustaría usar el pipe asíncrono. Así que lo que haría es:

import { map } from 'rxjs/operators';

//....

getLiveStream(id: number): Observable<Stream> {
  const url = `https://jsonplaceholder.typicode.com/albums/1/photos?id=${id}`;
  return this.http.get<Stream[]>(url).pipe(
    map((streams: Stream[]) => streams => streams[0] || {} as Stream)
  );
}

Componente :

import { Observable} from 'rxjs';

// ...

liveStream$: <Observable>Stream;

getLiveStream():void{
  const id = Number(this.route.snapshot.paramMap.get('id'));
  this.liveStream$ = this.streamService.getLiveStream(id);

Plantilla :

 <div *ngIf="liveStream$ | async as liveStream">
   <h4> {{liveStream.title}} </h4>
 </div>

Respuesta #2

no puedes llamar directamente a {{liveStream?.title}} porque la API devuelve un arreglo de transmisiones en vivo. Sin embargo, puedes hacer {{liveStream['title']}}, aunque no es el mejor enfoque. Sugiero usar ng-for

<div class="container">
  <h3>Livestream</h3>
  <div *ngFor="let stream of liveStream">
     <h4> {{stream.title}} </h4>
  </div>
</div>

puedes encontrar más ejemplos en la documentación de Angular