DomSanitizer выдает ошибку
Я доверяю URL-адресу .. DomSanitizer, как показано ниже:
myFunction(videoLoc:any):void {
videoLoc = this.sanitizer.bypassSecurityTrustResourceUrl(videoLoc);
}
но на консоли появляется ошибка:
GET unsafe:myFunction(https://thewikihow.com/video_c9F5kMUfFKk)
Мой HTML-код выглядит следующим образом:
<tr *ngFor = "let fetch of fetchApi.data.featured">
<td>
<video width = "320" height = "240" controls>
<source src=myFunction({{fetch.video_location}})>
</video>
</td>
</tr>
По этой причине я не мог отображать свои видео на странице HTML. Какую ошибку я делаю?
Опять та же ошибка
сейчас ставим этот <source [src] = "myFunction(fetch.video_location)">
Я сделал это, но теперь выдает ошибку TypeError: Cannot read property 'bypassSecurityTrustResourceUrl' of undefined at FetchApiComponent.push../src/app/fetch-api/fetch-
Можете ли вы распечатать URL-адрес console.info, например myFunction(videoLoc:any):void { console.info(videoLoc); return this.sanitizer.bypassSecurityTrustResourceUrl(videoLoc); }
Даю мне URL: https://thewikihow.com/video_c9F5kMUfFKk
проверьте значение этого console.info(this.sanitizer.bypassSecurityTrustResourceUrl(videoLoc));
Выдает ошибку
какую ошибку он выдает?
TypeError: невозможно прочитать свойство bypassSecurityTrustResourceUrl из undefined в FetchApiComponent.push ../ src / app / fetch-api / fetch-
отладить этот console.info(this.sanitizer)
Ответы 1
Ваш шаблон кажется неправильным, он должен быть
<source [src] = "myFunction(fetch.video_location)">
и просто верните videoLocation после очистки
myFunction(videoLoc:any):void {
return this.sanitizer.bypassSecurityTrustResourceUrl(videoLoc);
}
или вы можете справиться с этим с помощью трубы,
@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
а потом,
<source [src] = "mfetch.video_location | safe">
Я сделал это, но все равно получаю ошибку TypeError: Cannot read property 'bypassSecurityTrustResourceUrl' of undefined at FetchApiComponent.push../src/app/fetch-api/fetch-api
Опять выкидывает ошибку с использованием трубы - Uncaught Error: Template parse errors: The pipe 'safe' could not be found
вам нужно добавить канал под провайдерами в module.ts
ты создал трубу?
Это мой код в компоненте: @Pipe({ name: 'safe' }) export class FetchApiComponent implements OnInit, PipeTransform { transform(url) { return this.sanitizer.bypassSecurityTrustResourceUrl(url); }. Вот что я сделал в HTML: <tr *ngFor = "let fetch of fetchApi.data.featured"> <td ></td> <td> {{fetch.id | json}} </td> <td>{{fetch.video_location}}</td> <td><video width = "320" height = "240" controls> <source [src] = "fetch.video_location | safe"></video></td> </tr>
Позвольте нам продолжить обсуждение в чате.
можешь попробовать
myFunction(videoLoc:any):void { return this.sanitizer.bypassSecurityTrustResourceUrl(videoLoc); }