0

可能有类似的问题，但没有一个对我有帮助。我尝试使用我的 service.page.ts 从 firestore 获取 Url：

  baustellenAbfrage(): Observable<Baustellen[]>{
    return this.afStore.collection<Baustellen>(`Baustellen`).valueChanges();
  }

这适用于所有字符串，但不适用于“url”。在 ts 文件中，我使用 ngOnInit

import { Component, OnInit, ElementRef, SecurityContext } from '@angular/core';

import { Baustellen } from '../baustellen/baustellen.interface';
import { BaustellenService } from '../baustellen/baustellen.service';
import { Observable } from 'rxjs';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { Pipe, PipeTransform } from '@angular/core';



@Component({
  selector: 'app-baustellen',
  templateUrl: './baustellen.page.html',
  styleUrls: ['./baustellen.page.scss'],
})
    export class BaustellenPage implements PipeTransform, OnInit{
      bstUrl: SafeResourceUrl;
      public baustellen: Observable<Baustellen[]>;
    
      constructor(
        private baustellenService: BaustellenService,
        private sanitizer: DomSanitizer) { }
    
      ngOnInit() {
        this.baustellen = this.baustellenService.baustellenAbfrage();
      }
    
      transform(bstUrl) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(bstUrl);
      }
      
    }

并通过以下方式获取我的信息：

*ngFor="let bst of baustellen | async"

在我的 HTML 上。

要获取 url 部分，我使用 iframe：

    <iframe src="{{bst.bstUrl}}"
      width="100%" height="150px" style="border:0;" allowfullscreen="" loading="lazy">
    </iframe>

我知道我必须使用 DomSanitizer，但它不起作用，我不知道如何使用“bst.bstUrl”作为安全 URL。问题是，这必须是一个动态链接。

如何在我的 ngFor-Loop 中“集成” DomSanitizer？如您所见，在 baustellen.page.ts 我尝试使用 DomSanitizer 但这不起作用。我也使用管道

@Pipe({ name: 'safe' })

但后来我得到这个错误：错误错误：未捕获（承诺）：ReferenceError：在初始化之前无法访问'BaustellenPageModule'ReferenceError：在Module.BaustellenPageModule初始化之前无法访问'BaustellenPageModule'（baustellen-baustellen-module.js:10398）

4

0 回答 0