如何使用 ngFor angular 7 在轮播上显示所有图像数据

Question

我有轮播，可以在一次幻灯片上显示 3 张图片。在 ts 文件上，我已经从 htb 获取图像。代码如下。无论如何，当我 console.log 图像时，它会显示所有图像数据（4 图像）。

this.htbservicesService.getHtb()
            .subscribe( 
                htbs => {
                   this.htbs = htbs

                    for(var i = 0; i < htbs.length; i++) {
                    var obj = htbs[i];
                    console.log(obj.image);

                    this.imageObject = [{
                        image: obj.image,
                        thumbImage: obj.image   
                     }];
                    }       
              },
                error => reject(error),
                () => resolve("good")
            );
        });

并且在 html 文件上仅显示来自已循环图像的 1 个图像。显示图像的html如下

<ng-image-slider [images]="imageObject" #nav></ng-image-slider>

我曾尝试像这样在视图页面 (html) 上循环。但什么也没显示。

 <div *ngFor="let htb of imageObject">
    <ng-image-slider [images]="htb" #nav></ng-image-slider>
 <div> 

问题是，如何在 carrousel 上显示所有图像？我错过了什么或者我应该怎么做？

Answer 1

当您启动 http 调用以检索图像时，在我看来，您似乎已经接收到包含图像的数据结构数组。你可以这样实现它：

unsubscribe: Subject<boolean> = new Subject();
images = [];

ngOnInit() {
this.htbservicesService.getHtb()
.pipe(takeUntil(this.unsubscribe)) // unsubscribes your observable on destroy of the component to prevent memory leak
            .subscribe( 
                htbs => {
                   this.images = htbs;                   }
            );
        });
}

ngOnDestroy() {
  this.unsubscribe.next(true);
  this.unsubscribe.complete();
}

htbs 需要是一个数据结构，看起来像这样：

    {
        image: 'assets/img/slider/1.jpg',
        thumbImage: 'assets/img/slider/1_min.jpeg',
        alt: 'alt of image',
        title: 'title of image'
    }

在你的 html 模板中：

<ng-image-slider *ngIf="images.length > 0" [images]="images" #nav></ng-image-slider>

您可以使用 *ngIf 仅在图像超过 0 时显示。

亲切的问候