Как отложить компонент html от загрузки до получения всех изображений?

Question

У меня есть домашняя страница, где я хочу отобразить первые 3 изображения в виде слайдера, которые вызываются из API. это мой контроллер

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>

Какое решение для этого? введите описание изображения здесь

Answer 1

Я полагаю, он был удален DomSanitazer для предотвращения XSS-атак на ваше приложение. выключить его можно

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

Answer 2

Я предлагаю вам использовать трубу-кран на Observable

import { tap } from 'rxjs/operators';

 this.servive.allEvent().pipe(tap(_ => {
    // image loading code that you want to execute
   })).subscribe((val) => {
   console.log(val);
   });

EDIT

*ngIf="event && event[0]"

должно быть

*ngIf="event"

Вы хотите отображать только это блок кода, если в массиве событий есть что-то внутри? Просто наличие события даст вам истинную ценность, если что-то есть. Если в вашем массиве ничего нет, событие [0] может быть неопределенным и выдать ошибку.

Answer 3

Что ж, в последнее время лучше всего использовать распознаватели при получении этого маршрута. Подробнее о распознавателях читайте здесь resolvers , но обзор таков: распознаватели в основном не отображают маршрут до тех пор, пока не будут выбраны определенные c данные, прежде чем разрешить загрузку компонентов. Например:
Файл разрешения TS:

@Injectable()
  export class MainStoreResolve implements Resolve<any> {
     constructor(private  storeService: StoreService){}
     resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): 
     Observable<any> {
        return this.storeService.mainStore(route.params.identifier);
   }
 }

App.routing.ts:

{
  path: 'mainstore/:identifier',
  component: MainstorePage,
  resolve: {store: MainStoreResolve},
},

Файл Component.ts:

ngOnInit() {
   this.page = 'Store';
   this.products = this.route.snapshot.data.store.products;
   this.store = this.route.snapshot.data.store.storeDetails;
   // console.log(this.store.store_name);
}

Answer 4

оказалось, что картинки падали.

<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>

, когда я снял условие ngIf, (* ngIf = "event && event [0]") фотографии и детали предоставляются. я добавил это условие для устранения этой ошибки

СООБЩЕНИЕ ОБ ОШИБКЕ

ClientComponent.html:58 ERROR TypeError: Cannot read property '0' of undefined
    at Object.eval [as updateRenderer] (ClientComponent.html:58)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:30069)
    at checkAndUpdateView (core.js:29444)
    at callViewAction (core.js:29680)
    at execComponentViewsAction (core.js:29622)
    at checkAndUpdateView (core.js:29445)
    at callViewAction (core.js:29680)
    at execEmbeddedViewsAction (core.js:29643)
    at checkAndUpdateView (core.js:29440)
    at callViewAction (core.js:29680)

, убедившись, что у меня есть события, чтобы я мог получить доступ к их индексам, хотя их детали отображаются, ошибка появляется в консоли, как я могу go об этом?