angular - 我如何延迟加载组件 html 直到获得所有图像？

Question

我有一个主页，我想将前 3 个图像显示为从 API 调用的 slider 。
这是我的 Controller

export class ClientComponent implements OnInit {   public event;   public imgePAth: any;   public singleImg: any;   public secondImg: any;   public isAv: boolean = false;   filtersLoaded: Promise<boolean>;

  constructor(private servive: TycketService, private http: HttpClient,private route: Router) { }

  ngOnInit() {
    this.servive.allEvent().subscribe(data => {
      this.event = data;
      console.log(this.event);

      this.imgePAth = this.servive.imagebaseUrl(this.event[0]['image']);
      this.singleImg = this.servive.imagebaseUrl(this.event[1]['image']);
      this.secondImg = this.servive.imagebaseUrl(this.event[2]['image']);
      this.isAv = true;
      this.filtersLoaded = Promise.resolve(true);
      console.log(this.imgePAth);
    });   } }

我的api服务

  imagebaseUrl(data){
    return (this.imageUrl + data);
  }

我的 html 忽略事件索引，我正在使用 [ngStyle] 设置背景图像，当我检查时我得到变量的未定义路径，但是当我 console.log 在我的 ngOnInit 中的路径时，我得到了正确的路径

<div class="cover_slider owl-carousel owl-theme" *ngIf="filtersLoaded | async">
        <div class="overlay">
            <div class="cover_item" [ngStyle]="{'background-image':'url('+imgePAth+')'}">
                <div class="slider_content">
                    <div class="slider-content-inner">
                        <div class="container">
                            <div class="slider-content-center" *ngIf="event && event[0]">
                                <h2 class="cover-title">
                                    Prepare yourself for
                                </h2>
                                <strong class="cover-xl-text">{{event[0]['name']}}</strong>
                                <p class="cover-date">
                                    {{event[0]['date']}}  - {{event[0]['venue']}} {{event[0]['location']}}.
                                </p>
                                <button class=" btn btn-primary btn-rounded" (click)="onClickBuy(event[0])">Buy Tickets Now</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

解决方案是什么？
enter image description here

Answer 1

我猜它是被 DomSanitizer 删除的，以防止对您的应用程序进行 XSS 攻击。
要关闭它，您可以

constructor(private sanitizer: DomSanitizer){}
.....
this.imgePAth = this.sanitizer.bypassSecurityTrustResourceUrl(someUrl)