angular - Angular - 从端点加载异步数据时出现 404(未找到)
问题描述
我的媒体播放器不断收到 404 错误,因为“sermon.fileName”属性在组件加载到屏幕后可用。我该如何解决这个问题?
讲道.component.ts
import { Component, OnInit, ChangeDetectorRef, AfterViewChecked } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApiProvider } from '../../providers/api/api';
import { Breakpoints, BreakpointState, BreakpointObserver } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { SermonModule } from './sermon';
import { VgAPI } from 'videogular2/core';
@Component({
templateUrl: './sermon.component.html',
providers: [ApiProvider]
})
export class SermonComponent implements OnInit, AfterViewChecked {
constructor(private apiProvider: ApiProvider,
private route: ActivatedRoute,
private breakpointObserver: BreakpointObserver,
private cdRef: ChangeDetectorRef
) { }
isMobile: Observable<BreakpointState>;
public id: String;
public sermon = {} as SermonModule.Sermon;
api: VgAPI;
ngOnInit() {
this.id = this.route.snapshot.paramMap.get('id');
this.getSermon(this.id);
this.isMobile = this.breakpointObserver.observe(Breakpoints.Handset);
}
ngAfterViewChecked() {
this.cdRef.detectChanges();
}
onPlayerReady(api: VgAPI) {
this.api = api;
this.api.getDefaultMedia().subscriptions.ended.subscribe(
() => {
this.api.getDefaultMedia().currentTime = 0;
}
);
}
getSermon(id: String) {
this.apiProvider.getSermon(id).subscribe((data: SermonModule.Sermon) => {
if (environment.production === false) {
console.log(data);
console.log(new SermonObject().deserialize(data));
}
this.sermon = new SermonObject().deserialize(data);
});
}
}
class SermonObject implements SermonModule.Serializable<SermonModule.Sermon> {
id: string;
name: string;
fileName: string;
speaker: string;
description: string;
tags: string[];
date: string;
sermonSession: string;
deserialize(input) {
this.id = input.id;
this.name = input.name;
this.fileName = input.fileName;
this.speaker = input.speaker;
this.description = input.description;
this.tags = input.tags;
this.date = input.date;
this.sermonSession = input.sermonSession;
return this;
}
}
讲道.component.html
<vg-player style="height: 50px;">
<vg-controls>
<vg-play-pause></vg-play-pause>
<vg-playback-button></vg-playback-button>
<vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
<vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
</vg-scrub-bar>
<vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
<vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
<vg-mute></vg-mute>
<vg-fullscreen></vg-fullscreen>
</vg-controls>
<audio #media [vgMedia]="media" preload="auto">
<source [src]="sermon?.fileName" type="audio/mp3">
</audio>
</vg-player>
api.provider.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { map } from 'rxjs/operators';
@Injectable()
export class ApiProvider {
private apiUrl = environment.apiUrl;
private bookUrl = 'assets/data/books.json';
private speakerUrl = 'assets/data/speakers.json';
constructor(private httpClient: HttpClient) { }
public getAllSermons() {
return this.httpClient.get(this.apiUrl + '/sermon').pipe(map((data: any) => data.data)
);
}
public getSermon(id: String) {
return this.httpClient.get(this.apiUrl + '/sermon/' + id).pipe(map((data: any) => data.data)
);
}
public getAllBooks() {
return this.httpClient.get(this.bookUrl).pipe(map((data: any) => data)
);
}
public getAllSpeakers() {
return this.httpClient.get(this.speakerUrl).pipe(map((data: any) => data)
);
}
public getAllSessions() {
return this.httpClient.get(this.apiUrl + '/sermon/session').pipe(map((data: any) => data.data)
);
}
}
解决方案
你有两个选择(或更多)。一种是使用路由解析器,sermon
在组件加载之前解析。另一种方法是使用 an*ngif
仅显示可用的<audio>
元素sermon
:
<audio *ngIf="sermon" #media [vgMedia]="media" preload="auto">
<source [src]="sermon.fileName" type="audio/mp3">
</audio>
推荐阅读
- database - 什么是单调查询运算符?
- django - 如何仅更新 django 模型中的特定字段?
- c++ - C ++多线程 - 写入同一映射中的不同键会导致问题
- c# - 提交表单时有什么方法可以生成路由值而不是查询参数?
- python - 如何使用 pip3 安装 websocket?
- python - 将 stats.linregress 应用于 netcdf 文件中的每个网格单元
- hadoop - 当我尝试从 s3 存储桶读取文件时发生错误,有什么问题?
- dependency-injection - 如何通过 AutoFac 的 Umbraco 7 控制器中的依赖注入使用 IMediator (MediatR)?
- javascript - 如何从javascript代码中绘制流程图
- unity3d - 我在 Blender 中设置(并工作)了眼睑骨骼,但我不知道如何在 Unity 中控制骨骼