Запустить функцию после загрузки данных в ракурсе 7

Question

Я новичок в angular и просто пытаюсь справиться с этим. У меня есть страница, которая показывает товары магазина

<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>

Если массив products имеет значения, загрузите их. Там будет загружать непрозрачность 0, а затем будет загружаться один за другим. Мне нужно активировать функцию, когда контент закончил загружаться, прежде чем запускать четное.

У меня есть ngOnInit () в моем .ts - это создает подписку на возврат данных и помещает ее в массив products (используется в представлении) - источник данных представляет собой 2-секундный сон для представления медленных загрузок .

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

Я попытался перехватить вызов в подписчике, но он не сработал, и я увидел, что перехватывает жизненный цикл. Я попробовал AfterViewInit и AfterContentInit, но не получил ни одного удовольствия.

Как мне прослушать страницу (с данными), чтобы завершить загрузку перед запуском функции?

Есть ли какой-нибудь ресурс, который поможет мне найти такого рода вещи?

Спасибо Mark

EDIT: Я изменил его, чтобы использовать стиль [скрытый], а затем я могу использовать 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

Мое понимание вашей проблемы состоит в том, что вы хотите, чтобы функция выполнялась, когда страница завершит рисование.

Попробуйте ввести документ и превратить его в наблюдаемое. Я не использовал все возможности, но это происходит, когда ngoninit закончен. Другое решение - поместить его в блок обещаний.

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');
}

Answer 2

Вот демоверсия Stackblitz с угловой анимацией:

Вот некоторые документы об анимации (на которую указывает @ markblue777).

Элемент контейнера оборачивает список элементов, выбитых ngFor. Элемент контейнера содержит анимационный триггер [@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
    })
  }
}

Вам нужно будет добавить BrowserAnimationsModule, чтобы это работало:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';