问题描述： 在使用Angular和NGX-Masonry时，我遇到了一个显示问题。我希望使用NGX-Masonry来显示一组图片，但是图片在加载时会出现布局混乱的问题。我怀疑是因为图片在加载完成之前，没有正确计算其大小导致的。

解决方法：

1. 使用ngAfterViewChecked生命周期钩子函数来确保在视图加载完成之后再计算图片的大小。

import {AfterViewChecked, Component, ViewChild} from "@angular/core";
import {MasonryComponent} from "ngx-masonry";

@Component({
  selector: "app-masonry",
  template: `
    
      

        
      
    
  `
})
export class MasonryComponent implements AfterViewChecked {
  @ViewChild("masonry") masonry: MasonryComponent;
  images: any[] = [
    {src: "image1.jpg"},
    {src: "image2.jpg"},
    {src: "image3.jpg"}
  ];
  
  ngAfterViewChecked() {
    this.masonry.reloadItems();
    this.masonry.layout();
  }
  
  onImageLoad() {
    this.masonry.layout();
  }
}

2. 在ngAfterViewChecked生命周期钩子函数中，使用reloadItems方法重新加载图片，并使用layout方法重新布局。

3. 为图片添加(load)事件，当图片加载完成后，再次调用layout方法重新布局。

这样，当图片加载完成后，NGX-Masonry会重新计算图片的大小，并进行正确的布局。