Question

我正在使用砖石容器和灯箱在我的网站上创建一个画廊页面。

<div id="macy-container" style="visibility:none;">
  <div *ngFor="let image of _albums; let i=index" [className]="'demo'">
     <img [src]="image.src" (click)="open(i)"  [className]="'demo-image'" alt=""/>
  </div>
</div>

我有一个问题，如果我对图像进行硬编码，一切都很好，但是一旦我尝试动态渲染，砌体就不会渲染。如果您尝试检查，则控件将呈现。我也试过做一个超时功能，它会正确地渲染控件。

我意识到这基本上是一个种族问题。我的图像数据来自服务：

getImageData(){
  return this.http.get("./assets/eat.json")
  .map((res:Response) => res.json().images); //records in this case
}

在我想要数据的页面中，我在我的构造函数中调用服务：

import { AppService } from './../core/app.service';
import { EatModule } from './eat.module';
import { Component, OnInit, AfterContentInit } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { Lightbox } from 'angular2-lightbox';

@Component({
  selector: 'app-eat',
  templateUrl: './eat.component.html',
  styleUrls: ['./eat.component.scss'],
  providers: [ AppService ]
})
export class EatComponent implements OnInit, AfterContentInit {

  private _album: Array<string> = [];
  public _albums:Array<any> = [];
  private myJsonData : any;
constructor(private _lightbox: Lightbox,private http: Http, private appService: AppService) {

  this.appService.getImageData().subscribe((data) => {

    console.log("JSON data is - ", data);
    this.myJsonData = data;

    for(let result of this.myJsonData){
      const album = { 
        src : result.src,
        caption : result.caption,
        thumb : result.thumb
      }
          this._albums.push(album);
    }
  });

}

然后在我的ngOnInit中，我为我的砌体加载了我的样式：

ngOnInit() {

 var masonry = new Macy({
container: '#macy-container',
trueOrder: false,
waitForImages: true,
debug: true,
margin: {
    x: 10,
    y: 10
}
 })
}

没有任何错误和页面渲染，但没有将样式应用于砌体容器。如果您检查页面，则会神奇地显示样式并且页面呈现正确。

Angular 4中的动态内容未设置样式

0 个答案: