используя API и Promise с angular-modal-gallery

Question

Я пытаюсь реализовать использование angular-modal-gallery в моем Angular 4 SPA.

Я бегу;

"angular-modal-gallery": "5.7.1",

В моих component.ts у меня есть;

import { Injectable, Inject, Component, ViewChild } from '@angular/core';
import { SwiperComponent } from 'angular2-useful-swiper';
import { Image } from 'angular-modal-gallery';

import { ImageService } from '../../../services/image.service';
import { Subscription } from 'rxjs';
import { Observable } from 'rxjs/Observable';

@Component({
    selector: 'hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.css'],
    providers: [ImageService]
})
export class HeroComponent {

    @ViewChild('heroSwiper') usefulSwiper: SwiperComponent;

    slidesForScreenWidth: number = 1;

    count: number = 0;

    swiperConfig: any = {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 20,
        speed: 400,
        effect: "cube",
        slidesPerView: this.slidesForScreenWidth
    };

    sliderImages: Image[];   
    sliderImagesSubscription: Subscription;

    constructor(private imageService: ImageService) {

        this.sliderImagesSubscription = this.imageService.getMainSliderImages().subscribe((result: Image[]) => {
            this.sliderImages = result;
            console.log(this.sliderImages);
        });

        setInterval(() => {
            this.usefulSwiper.swiper.slideNext();
            this.count++;

            if (this.count == this.usefulSwiper.swiper.slides.length) {
                this.usefulSwiper.swiper.slideTo(0, 2000);
                this.count = 0;
            }

        }, 8000);
    }

}

а в моем html есть;

<div class="row slider">
<swiper [config]="swiperConfig" class="col-md-12" #heroSwiper>
    <div class="swiper-wrapper">
        <div class="swiper-slide" *ngFor="let image of sliderImages | async">
            <div class="preview background-bottom" style="background-image:url('{{ image.img }}')">
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>

    <div class="scroll-down">
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
</swiper>

Однако, когда я пытаюсь запустить, я получаю сообщение об ошибке;

HeroComponent.html: 3 ОШИБКА Ошибка: InvalidPipeArgument: '[объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта], [ объект Object], [объект Object], [объект Object], [объект Object], [объект Object], [объект Object] 'для канала' AsyncPipe '

Может кто-нибудь объяснить, что я здесь делаю, пожалуйста?

Answer 1

Вы уже подписаны на событие. Так что нет необходимости использовать async трубу здесь.

    <div class="swiper-slide" *ngFor="let image of sliderImages">

Если вы хотите использовать трубу async, присвойте наблюдаемое свойству aslideImages свойство

constructor(private imageService: ImageService) {

    this.sliderImages = this.imageService.getMainSliderImages(); 

<div class="swiper-slide" *ngFor="let image of sliderImages | async">