angular - Angular Modal Gallery - 位置画廊图像

问题描述

我正在尝试实现图像模式，但是我遇到了几个问题。

我希望第一个图像填充整个大框（类下拉），其余的位于同一个框下方，如图所示。

我已经尝试了一切，但是在图像数组中，我不能只显示一个，例如，只显示第一个:(

有什么方法可以实现吗？

谢谢！

我的堆栈闪电战

Stackblitz 链接

HTML

<div class="drop">
    <div class="abc">
    <!-- 1 Image here  -->
        <section>
            <ks-modal-gallery [id]="3" [modalImages]="imagesMixedSizes"></ks-modal-gallery>
        </section>
    </div>
</div>
<div class="row">
    <div class="Upcard">
    <!-- 2,3,4,5 Images here !!!  -->
    </div>
</div>

组件.ts

 imagesMixedSizes: Image[] = [
    new Image(0, {
      // modal
      img: 'https://raw.githubusercontent.com/Ks89/angular-modal-gallery/master/examples/systemjs/assets/images/gallery/pexels-photo-135230.png',

    }),
    new Image(1, {
      // modal
      img: 'https://raw.githubusercontent.com/Ks89/angular-modal-gallery/master/examples/systemjs/assets/images/gallery/pexels-photo-547115.jpeg'
    })]

图像问题/解释

标签： angulartypescriptmodal-dialog

可能您可以将变量一分为二。如果这是一个选项。

喜欢这里：https ://stackblitz.com/edit/angular-anexan

或者，如果您不想不必要地创建新变量，请切片相同的数组：

例子：

<ks-modal-gallery [id]="3" [modalImages]="imagesMixedSizes.slice(0,1)"></ks-modal-gallery>

<ks-modal-gallery [id]="4" [modalImages]="imagesMixedSizes.slice(1)"></ks-modal-gallery>

angular - Angular Modal Gallery - 位置画廊图像

问题描述

解决方案

推荐阅读