URL-адрес sanitize не отображается в iframe

Question

У меня есть сервис, который возвращает URL-адреса видео в формате, подобном [url1, url2, ...] так как это небезопасные ссылки, продезинфицируйте их в цикле.

 import { Component, OnInit } from '@angular/core';
    import { HomeService } from '../home/home.service'
    import { BrowserModule, DomSanitizer } from '@angular/platform-browser'
    import { SafeResourceUrl } from '@angular/platform-browser/src/security/dom_sanitization_service';

@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {

    videoCollection: string[] = [];
    videoCollectionSafe: SafeResourceUrl[];

    constructor(private homseService: HomeService, sanitizer: DomSanitizer) {
        this.homseService.getVideos().subscribe((response) => this.videoCollection = response.json());

        for (var i = 0; i < this.videoCollection.length; i++) {
            this.videoCollectionSafe.push(sanitizer.bypassSecurityTrustResourceUrl(this.videoCollection[i]));
        }
    }

    ngOnInit() {

    }
}

в HTML я пишу

  <!--<li *ngFor="let obj of videoCollectionSafe"><iframe width="560" height="315" [src]="obj" frameborder="0" allowfullscreen></iframe></li>-->
 <li *ngFor="let obj of videoCollectionSafe">{{obj}}</li>

обе строки не работают. На странице ничего не отображается. может ли кто-нибудь помочь мне из этого.

Answer 1

lesimoes отчасти правильно, так как вы должны использовать хук жизненного цикла, а не конструктор.

Большая проблема в том, что вы пытаетесь перебрать список до того, как будет получен. Наблюдаемые подписки являются асинхронными, как и любой вызов AJAX. Таким образом, вы должны действовать на основании данных после того, как получите их обратно. Простое размещение строк кода после вызова AJAX этого не сделает.

Для этого у вас есть два варианта.

Сделайте это в обработчике onComplete :

export class HomeComponent implements OnInit {

    videoCollection: string[] = [];
    videoCollectionSafe: SafeResourceUrl[] = [];

    constructor(private homseService: HomeService, sanitizer: DomSanitizer) {}

    ngOnInit() {

        this.homseService.getVideos().subscribe(
            response => this.videoCollection = response,
            error => console.error(error),
            () => this.videoCollection.forEach(video => this.videoCollectionSafe.push(sanitizer.bypassSecurityTrustResourceUrl(video)))
        );
    }
}

Или более «функционально» в обработчике onNext, так как вам вообще не нужен посредник videoCollection, кажется:

export class HomeComponent implements OnInit {

    videoCollectionSafe: SafeResourceUrl[] = [];

    constructor(private homseService: HomeService, sanitizer: DomSanitizer) {}

    ngOnInit() {
        this.homseService.getVideos().subscribe(
            videoCollection => videoCollection.forEach(video =>  this.videoCollectionSafe.push(sanitizer.bypassSecurityTrustResourceUrl(video)))
            error => console.error(error)
        );
    }
}

Кроме того, вы не указали, какую версию angular вы используете, но если она после 4.3, вам не нужно разыгрывать response.json() , потому что HttpClient сделает это для вас . Если вы используете версию Angular, настолько старую, что у вас все еще есть старая Http, вам следует серьезно подумать об обновлении, так как 6.0.0 была выпущена вчера.

Answer 2

Переместите ваш код в ngOnInit (). Проверьте это о жизненном цикле Angular: https://angular.io/guide/lifecycle-hooks

export class HomeComponent implements OnInit {

videoCollection: string[] = [];
videoCollectionSafe: SafeResourceUrl[];

constructor(private homseService: HomeService, sanitizer: DomSanitizer) {   }

ngOnInit() {

    this.homseService.getVideos().subscribe((response) => 
    this.videoCollection = response.json());

    for (var i = 0; i < this.videoCollection.length; i++) {         this.videoCollectionSafe.push(sanitizer.bypassSecurityTrustResourceUrl(this.videoCollection[i]));
    }

}
}