Question

我是新来的有角度的人，只是想抓住它。我有一个显示商店商品的页面

<div *ngIf="products" class="col-lg-12">  
  <div *ngFor="let prod of products.data" class="col-lg-3 cont" cdkDrag>
    <div class="col-sm-offset-2 col-sm-8 productItem">
      <p class="text-center">
        <img src="https://www.classicposters.com/images/nopicture.gif" width="125" height="160" />
      </p>
      <p>
        <i>{{prod.title}}</i>
        <br />
        <i >{{prod.price | currency:"£"}}</i>
      </p>
    </div>
  </div>
</div>
<div *ngIf="products" class="row">
  <div class="col-lg-12 text-center">
     Page {{products.pageOn}} of {{products.totalPages}}
  </div>  
</div>

如果产品数组具有值，则将其加载。将加载不透明度0，然后依次加载。在触发偶数之前，我需要在内容加载完成时触发该函数。

我的.ts中有ngOnInit（）-这将创建一个数据返回的订阅，并将其放入products数组（用于视图中）-数据源在其上停留2秒钟，以表示缓慢的加载时间

ngOnInit() {
    this.data.getProducts(1).subscribe(prods => {
      this.products = prods;
    });
    console.log('on init: ' + Date().toString());
  }

我尝试挂接到订户中的呼叫，但没有成功，然后我看到了生命周期挂接。我尝试了AfterViewInit和AfterContentInit，但都不满意。

在触发该功能之前，我将如何监听页面（包含数据）以完成加载？

是否有任何资源可用来帮助我发现此类问题？

谢谢标记

编辑：我将其更改为使用[隐藏]样式，然后可以使用AfterViewInit触发动画周期。但是，我得到一个错误，并且它在未初始化时尝试使用products.data。看来* ngIf使AfterViewInit能够很快触发

<div [hidden]="!products" class="col-lg-12">  
      <div *ngFor="let prod of products.data" class="col-lg-3 cont">

Answer 1

这里是Stackblitz demo，带有角度动画：

这里是some doc的动画（@ markblue777所指向）。

容器元素包装由ngFor标记的项目列表。容器元素包含一个动画触发器figfile = BytesIO() plt.savefig(figfile, format='png') plt.clf() figfile.seek(0) figdata_png = base64.b64encode(figfile.getvalue()) return figdata_png.decode('UTF-8')，该触发器设置为查询每个内部项目。

这些项目会按顺序顺序添加，并且不透明度淡入动画会运行。

bokeh

[@listAnimation]

您必须添加<div *ngIf="products" class="col-lg-12" [@listAnimation]="items.length"> <div *ngFor="let prod of items" class="col-lg-3 cont" cdkDrag> <div class="col-sm-offset-2 col-sm-8 productItem"> <p class="text-center"> <img src="https://www.classicposters.com/images/nopicture.gif" width="125" height="160" /> </p> <p> <i>{{prod.title}}</i> <br /> <i >{{prod.price | currency:"£"}}</i> </p> </div> </div> </div> <div *ngIf="products" class="row"> <div class="col-lg-12 text-center"> Page {{products.pageOn}} of {{products.totalPages}} </div> </div>才能起作用：

import { Component, OnInit } from '@angular/core';
import {
  trigger,
  style,
  query,
  stagger,
  animate,
  transition,
} from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
  trigger('listAnimation', [
    transition('* => *', [
      query(':enter', [
        style({ opacity: 0 }),
        stagger(100, [
          animate('0.5s', style({ opacity: 1 }))
        ])
      ], { optional: true })
    ])
  ])
  ],
})
export class AppComponent implements OnInit  {
  products = { pageOn: 0, totalPages: 5, data: null };
  items = [];

  ngOnInit(): void {
    this.apiCall().then(products => {
      this.products = products;
      // We then animate the entry of each item separately
      products.data.forEach((product, idx) => {
        setTimeout(() => {
          this.items.push(product);
        }, 500 * (idx + 1)); // Each item is inserted 500ms after the last one.
      });
    });
  }

  // Simulate the API call
  apiCall(): Promise<any> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ pageOn: 0, totalPages: 10, data: [
          { title: 'cheese', price: 1 },
          { title: 'chothes', price: 2 },
          { title: 'Food', price: 3 },
        ]});
      }, 2000); // with a delay of 2000ms
    })
  }
}

Answer 2

我对您的问题的理解是，您希望函数在页面绘制完成后运行。

尝试注入文档并将其变成可观察到的。我没有玩所有的可能性，但是当ngoninit完成时会发生这种情况。另一个解决方案是将其放入promise块。

private documentDone: Observable<any>
constructor(
@Inject(DOCUMENT) private document: any){}

ngOnInit(): void {
this.documentDone = fromEvent(this.document, 'readystatechange');
this.documentDone.subscribe(state => console.log('im done');
}

在角度7

2 个答案: