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

你不能直接调用 {{liveStream?.title}} 因为 api returns 一个直播数组。你可以做 {{liveStream['title']}} 但这不是最好的方法。我建议使用 ng-for

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

您可以在 angular docs

中找到更多示例

Answer 2

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

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>

Answer 3

正如其他答案所指出的问题，那是因为我得到了一个数组并没有遍历它，所以我只是将数组括号分配给我的服务文件和组件文件中的可观察类型，遍历它并现在可以使用了。

//TS file //
export class LivestreamComponent implements OnInit {
liveStream!: Stream[];

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

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

ANGULAR：无法让我的数据显示在我的 HTML 文件中

ANGULAR: Can't get my data to show on my HTML file

typescript

angular-ui-router

angular