Angular-等到我收到数据后再加载模板

提问者：小点点

Angular-等到我收到数据后再加载模板

我有一个组件，使用此模板动态呈现多个组件：

<div [saJquiAccordion]="{active: group.value['collapsed']}" *ngFor="let group of filterGroupsTemplate | keysCheckDisplay;">
    <div>
        <h4>{{group.key | i18n}}</h4>
        <form id="ibo-{{group.key}}" class="form-horizontal" autocomplete="off" style="overflow: initial">
            <fieldset *ngFor="let field of group.value | keys">
                <ng-container *ngComponentOutlet="fieldSets[field.value.template];
                                    ngModuleFactory: smartadminFormsModule;"></ng-container>
            </fieldset>
        </form>
    </div>
</div>

问题是填充这些组件所需的数据我从API调用中获得：

      this.getFiltersSubscription = this.getFilters().subscribe(
            (filters) => {
                this.filters = filters;
                log.info('API CALL. getting filters');

                // Sending data to fieldform components
                this.iboService.updateIBOsRankList(filters['iboRank'].data);
                this.iboService.updateIBOsNewsletterOptions(filters['iboNewsletter'].data);
                this.iboService.updateIBOsTotalOrders(filters['iboTotalOrders'].data);
            }
        );

因此，一旦我有了我的数据，我就会触发我的组件订阅的服务可观察性，然后他们将处理收集到的数据。

问题

如果在所有组件加载之前进行API调用，我将触发这些服务方法传递数据，但没有人会订阅这些可观察对象。

一种办法是：

首先加载数据，只有当我加载了数据时，我才会渲染模板，因此，动态渲染所有这些组件，然后我才会触发这些服务方法（可观察对象）。

我不想为每个组件做一个API的调用，因为它可能像60个组件，我宁愿对代码进行松散的抽象，但我更喜欢这样做：

// Listens to field's init and creates the fieldset triggering a service call that will be listened by the field component
        this.iboService.initIBOsFilters$.subscribe(
            (fieldName) => {
                if (fieldName === 'IBOsRankSelectorFieldComponent') {
                    log.data('inside initIBOsFilters$ subscription, calling updateIBOsFilters()', fieldName);
                    this.iboService.updateIBOsRankList(this.filters['iboRank'].data); // HERE I'M PASSING DATA TO THE COMPONENT RENDERED DYNAMICALY. BUT IF this.filters IS UNDEFINED, IT BREAKS
                }
            }
        );

为了做到这一点，我需要确保定义了this. filter，因此，我得出结论：

我怎么能等到API调用结束和this. filter定义之前呈现我的模板html？

对不起，如果我的问题有点长，如果你需要更多的细节，请告诉我。

谢谢！

共3个答案

匿名用户

在研究了人们给我的不同方法后，我在async管道上找到了解决方案。但是，我花了一段时间才理解如何实现它。

解决方案：

// Declaring the Promise, yes! Promise!
filtersLoaded: Promise<boolean>;

// Later in the Component, where I gather the data, I set the resolve() of the Promise
this.getFiltersSubscription = this.getFilters().subscribe(
    (filters) => {
        this.filters = filters;
        log.info('API CALL. getting filters');

        this.filtersLoaded = Promise.resolve(true); // Setting the Promise as resolved after I have the needed data
    }
);

// In this listener triggered by the dynamic components when instanced,
// I pass the data, knowing that is defined because of the template change

// Listens to field's init and creates the fieldset triggering a service call
// that will be listened by the field component
this.iboService.initIBOsFilters$.subscribe(
    (fieldName) => {
        if (fieldName === 'IBOsRankSelectorFieldComponent') {
            log.data('inside initIBOsFilters$ subscription, calling updateIBOsFilters()', fieldName);
            this.iboService.updateIBOsRankList(this.filters['iboRank'].data);
        }
    }
);

在模板中，我使用async管道，它需要可观察或Promise

<div *ngIf="filtersLoaded | async">
    <div [saJquiAccordion]="{active: group.value['collapsed']}" *ngFor="let group of filterGroupsTemplate | keysCheckDisplay;">
        <div>
            <h4>{{group.key | i18n}}</h4>
            <form id="ibo-{{group.key}}" class="form-horizontal" autocomplete="off" style="overflow: initial">
                <fieldset *ngFor="let field of group.value | keys">
                    <ng-container *ngComponentOutlet="fieldSets[field.value.template];
                                    ngModuleFactory: smartadminFormsModule;"></ng-container>
                </fieldset>
            </form>
        </div>
    </div>
</div>

注：

异步管道需要一个可观察或一个Promise据我所知，这就是为什么让它工作的唯一方法是创建一个Promise
我没有使用解析器方法，因为它是通过Angular的路由到达组件时使用的。这个组件是更大组件的一部分，它不像任何其他普通组件那样通过路由实例化。（不过尝试了这种方法，用了一点，没有完成这项工作）

匿名用户

您可以使用解析器来确保在激活路由之前加载这些数据（或您的过滤器已初始化）。

https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html

https://angular.io/api/router/Resolve

匿名用户

<p class="p-large">{{homeData?.meta[0].site_desc}}</p>

刚刚使用了一个“？”在从服务器加载数据的变量之后。

home.组件. ts

import { Component, OnInit } from '@angular/core';
import { HomeService } from '../services/home.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  public homeData: any;
  constructor(private homeService: HomeService) {}

  ngOnInit(): void {
    this.homeService.getHomeData().subscribe( data => {
      this.homeData = data[0];
    }, error => {
      console.log(error);
    });
  }
}