如何解决角度:无法让我的数据显示在我的 HTML 文件中
我正在获取 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>
解决方法
正如在其他答案中所建立的那样,您收到的是一个包含一个对象的数组。我会从数组中提取对象,也喜欢使用异步管道。所以我会做的是:
from sympy import *
x = Symbols("x")
result = integrate(expression) # Expression is user inputed
# Send the result
组件:
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);
,
你不能直接调用 {{liveStream?.title}} 因为 api 返回一个直播流数组。您可以执行 {{liveStream['title']}} 但不是最好的方法。我建议使用 ng-for
<div class="container">
<h3>Livestream</h3>
<div *ngFor="let stream of liveStream">
<h4> {{stream.title}} </h4>
</div>
</div>
您可以在 angular docs
中找到更多示例 ,正如其他答案指出的问题,这是因为我得到了一个数组并且没有循环遍历它,所以我只是将数组括号分配给我的服务文件和组件文件中的可观察类型,循环遍历它并且它工作现在。
//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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。