Блог

Надеюсь, у вас все хорошо, это будет мой второй пост, поэтому я постараюсь быть как можно более подробным. Моя проблема заключается в следующем, я ищу стиль pinterest в своем приложении angular 8, когда я нашел masonry и его функциональные возможности, я был очень заинтересован, когда я скомпилировал свое приложение, оно загружает изображения, но его эффект не применяется. Я искал и не нашел много документации, которая могла бы мне помочь, если у кого-то есть такая же проблема и он может мне помочь, я был бы очень признателен, тогда я оставляю свой код, чтобы вы могли мне помочь.

package.json «ngx-masonry»: «^ 1.1.4»,

seccion.ts

 import { NgxMasonryModule } from 'ngx-masonry';
import { MasonryGalleryModule } from 'ngx-masonry-gallery';

import * as jQuery from 'jquery';

@Component({
  selector: 'app-seccion',
  templateUrl: './seccion.component.html',

  providers:[NoticiasService],

  styleUrls: ['./seccion.component.css']
})

export class SeccionComponent implements OnInit {
public economias: Economia[] ;
public medicinas: Medicina[] ;
public tecnologias: Tecnologia[] ;
public politicas: Politica[];
public url: string;


public myOptions: MasonryOptions = {
  gutter: 10,
  columnWidth: 250
}; 
 

archive.scss

 ngx-masonry{
  width: 30%;
  img{
    max-width: 300px;
  }
} 
 

HTML

 <div class="cont-noticias">

  <ngx-masonry  [options]="{ gutter: 10 }" *ngFor="let economia of economias"  >
    <div myOptions class="contenedor-contenido" >
                      <img src="{{ url 'get-image/' economia.imageM }}" class="imagen-muestra" alt="{{ 
                        economia.title }}" min-width="100px">
                      <div class="contenedor-info">
                          <div >
                              <h6 class="subtitulo">{{ economia.subtitulo }}</h6>
                          </div>
                          <div>

                                  <span>{{economia.year}}</span>
                          </div>
                      </div>
      </div>
   </ngx-masonry>


 </div> 
 

imagen html

imagehtml

управление изображением

imagecmd