Назначение наблюдаемых задержек внешнего рендеринга - PullRequest
Новая
       18

Назначение наблюдаемых задержек внешнего рендеринга

0 голосов
/ 31 октября 2019

Я привезу некоторые базовые данные с моего сервера, данные о продукте. Когда я присваиваю эти данные моему наблюдаемому объекту (не подписываясь), я получаю заметное отличие в рендеринге | условного времени.

, вот как я назначаю наблюдаемое 

export class ProductSelectionComponent implements OnInit {
  constructor(private productGetService: ProductGetService, private route: ActivatedRoute) { }

  private productFamilyInformation$: Observable<WholesaleServiceApi.ProductSelectionGetResponse> = null;
  private id$: string;
  private errors: any;
  private showQuantity= false;

  ngOnInit() {
      this.getProductByProductFamily();
  }

    getProductByProductFamily(){
      try {
          this.id$ = this.route.snapshot.paramMap.get('id');
          console.log(Number(this.id$));
          this.productFamilyInformation$ = this.productGetService.getProductByProductFamily(Number(this.id$));
      }catch(e){
          this.handleError("getProductByProductFamily", e);
      }
    }
}

, тогда я получаюкод переднего конца, подобный следующему: 

<div *ngIf="((productFamilyInformation$ | async) && !errors); else loadingSpinner"> // CONDITIONAL
<div class="dc-title2">Mail Add</div>
<p class="dc-micro">{{(productFamilyInformation$).productList[0].productDescription}}.</p>
    <hr>
<div class="row card-group mt-2">
    <div class="col-lg-4 col-md-4 col-sm-6 mb-4" *ngFor="let product of (productFamilyInformation$ | async)?.productList">

...

, поэтому я по существу проверяю, существуют ли данные ... покажите панель, но она почти идет в порядке .. divбудет отображаться, поскольку producelist! = null, тогда, возможно, задержка составит 500 мс, пока карты не будут отображаться как

, тогда как, если я выберу следующий подход, я не получу задержку. 

this.productGetService.getProductByProductFamily(Number(this.id$)).subscribe(x => this.productFamilyInformation$ = x)
...