javascript - 将 API 和 Promise 与 Angular-modal-gallery 结合使用

Question

我正在尝试在我的 Angular 4 SPA 中使用 angular-modal-gallery 来实现。

我正在运行；

"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 ERROR Error: InvalidPipeArgument: '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' for pipe '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">