角度 7 中的砌体覆盖答案

【问题标题】：masonry overlay in angular 7角度 7 中的砌体覆盖
【发布时间】：2019-04-03 15:34:55
【问题描述】：

我在我的 Angular 应用程序中使用砖石设计：https://www.npmjs.com/package/ngx-masonry

我的问题是一些项目重叠：

当我手动更改窗口大小时，它看起来不错：

知道怎么解决吗？

module.ts

import { NgxMasonryModule } from 'ngx-masonry';
imports: [ NgxMasonryModule]

component.html

<ngx-masonry class="row small-gutters">
     <div ngxMasonryItem *ngFor="let evento of eventos | async" class="py-0 grid-five col-lg-3 col-md-4 col-sm-6 col-6 my-2">
            <div class="aviso">
                <a [routerLink]="['/evento', evento.id]" class="text-white">
                    <img src="{{ evento.imagen }}" class="rounded" alt="{{ evento.titulo }}" width=100%>
                    <div class="pt-1 pt-md-2 d-flex align-items-start">
                        <div class="fechaThumbnail d-none d-lg-block">
                            <h4 class="dia">{{ evento.fechaInicio.toDate() | date: 'dd' }}</h4>
                            <h6 class="mes">{{ evento.fechaInicio.toDate() | date: 'LLL' | uppercase | slice:0:3 }}</h6>
                        </div>
                        <div>
                            <h6 class="font-weight-light mb-0 text-primary">{{ evento.titulo | truncate: 42 }}</h6>
                            <div class="small font-weight-light op-50 mt-1">
                                <span class="d-none d-lg-block">{{ evento.direccion | truncate: 25 }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
 </ngx-masonry>

【问题讨论】：

标签： angular masonry

【解决方案1】：

为避免重叠问题，您必须将以下代码添加到 ngx-masonry 标记 [useImagesLoaded]="true"

实际标签请阅读 cmets

注意：我也面临同样的重叠问题。

希望对你有所帮助。

【讨论】：

例如：

【解决方案2】：

请像这样更新您的代码

在 div 标签中添加属性 [useImagesLoaded]="true"。在 ngxMasonryItem 旁边

【讨论】：