javascript - 使用API​​和Promise搭配angular-modal-gallery

我正在尝试在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错误错误：InvalidPipeArgument：'[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象] ，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]'用于管道'AsyncPipe'


有人可以在这里解释我做错了吗？

最佳答案

您已经订阅了该活动。因此，无需在此处使用async管道。

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

如果要使用async管道，则将observable分配给aslideImages属性

constructor(private imageService: ImageService) {

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

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

关于javascript - 使用API​​和Promise搭配angular-modal-gallery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51136358/