代码之家 › 专栏 › 技术社区 › Matthew Flynn

使用API和Promise与Angular Modal Gallery

angular javascript

Matthew Flynn · 技术社区 · 6 年前

我正在尝试使用 angular-modal-gallery 在我的角4水疗。

我在跑步;

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

在我的组件中,我有;

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错误:无效管道参数:“[对象对象对象]、[对象对象对象]、[对象对象对象]、[对象对象对象]、[对象对象对象]、[对象对象对象对象]、[对象对象对象对象]、[对象对象对象]、[对象对象对象对象]、[对象对象对象对象]”表示管道“异步管道”

有人能解释一下我在这里做错了什么吗?

1 回复 | 直到 6 年前

Sachila Ranawaka 6 年前

您已经订阅了活动。所以不需要使用 async 管道在这里。

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

如果你想使用 异步的 pipe然后将observable分配给 aslideImages 财产

constructor(private imageService: ImageService) {

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

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