ANGULAR:无法让我的数据显示在我的 HTML 文件上

Question

我正在获取 api json 占位符，并且尝试获取与对象中的路由 id 匹配的页面。通过控制台记录一切似乎都有效，当我导航到特定页面时，具有匹配 id 的对象会显示在我的控制台上，但当我尝试将数据放在 html 上时，它不会显示。我没有收到任何错误。我不知道该怎么办。 screenshot of the page

//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>

Answer 1

正如其他答案中所确定的，您收到的是一个包含一个对象的数组。我会从数组中提取对象，并且还喜欢使用异步管道。所以我要做的是:

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)
  );
}

组件:

import { Observable} from 'rxjs';

// ...

liveStream$: <Observable>Stream;

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

模板:

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