Część DOM ciągle odświeżana w Angular 5. Podczas próby pobrania filmów z YouTube API - youtube-api, youtube-data-api, angular5, youtube-api-v3, rxjs-dom

Wywoływanie interfejsu API Youtube w

ngOnInit(){

var finalURL = "https://www.googleapis.com/youtube/v3/search?key="+this.api+"&channelId="+this.chanId+"&part=snippet,id&order=date&maxResults="+this.result+""
console.log(finalURL);

this.obser$ = this.http.get(finalURL).subscribe(response=>{

console.log(response);

let ytresults= response.json();
console.log(ytresults);

ytresults.items.forEach(obj => {
console.log(obj.id.videoId);
this.ytvideolist.push(obj.id.videoId);

});
console.log(this.ytvideolist);
}

próbuję tutaj odkażać adres URL filmu

<li *ngFor= "let id of ytvideolist">
<iframe [src]="getEmbedUrl(id)" frameborder="0" allowfullscreen></iframe>
</li>

Używanie sanitizera DOM w funkcji getEmbedUrl (id)

 getEmbedUrl(id){
console.log(id);
return this.sanitizer.bypassSecurityTrustResourceUrl("https://youtube.com/embed/"+id);
}

Wszystko działa dobrze, pojawiają się filmypobrano, ale część DOM ciągle się odświeża. Próbowałem zrezygnować z subskrypcji na wszystkich hakach cyklu życia komponentu. Ale jeśli zrezygnuję z subskrypcji, nie będę pobierał żadnych wyników. Czy jest jakieś inne rozwiązanie lub brakuje mi czegoś tutaj!

Odpowiedzi:

Rozwiązano problem za pomocą potoku

import { Pipe, PipeTransform } from "@angular/core";
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";

@Pipe({
name: "youtubeSafeUrl"
})
export class YoutubePipe implements PipeTransform {

constructor(private sanitizer: DomSanitizer){

}

transform(videoId: string): SafeResourceUrl {
return this.sanitizer.bypassSecurityTrustResourceUrl(
`https://www.youtube.com/embed/${videoId}`);
}

}

Wewnątrz html zrobił coś takiego

<div *ngFor= "let videoId of ytvideolist" class="shadow1">
<iframe [src]="videoId | youtubeSafeUrl" frameborder="0" allowfullscreen></iframe>
</div>

Zgaduję problem z subskrypcją. w każdym razie to rozwiązało! Mam nadzieję, że to komuś pomoże.