我的一个组件出现了奇怪的行为。组件从中的服务加载对象列表 ngOInit() . 我面临的问题是完全随机的，有时需要花费大量时间来呈现此列表，有时是即时的。我已经排除了这是一个后端问题，调用后端总是很快。我发现了以下几点。加上钩子之后 DoCheck 我已经看到，当提到的问题发生时，它需要相当长的一段时间，因为 ngOnInit() 到达终点和终点 ngDoCheck() 被称为。
根据angular的文件 ngDoCheck() 被召唤 ngOnIni() 所以我不完全理解为什么有时候需要这么长时间。我补充说 console.log 每次调用的执行时间——我在调用的最后一行添加了日志 ngOnInit() ，当获取对象列表的调用实际完成时 ngDoCheck() .
这就是浏览器控制台在花费大量时间时的外观：

正如你所看到的，它已经完成了任务 ngOnInit() ，然后完成 ngDoCheck() ，完成获取项目，然后在10秒后运行 ngDoCheck() 当列表在屏幕中实际呈现时。
这是组件代码的一部分 ngOnInit() 及 ngDoCheck() :

ngDoCheck(){
    console.log('ngDoCheck. N. Items ' + this.items.length, new Date());
  }

  ngOnInit() {
    this.isLoading = true;
    this.sensorTypeConfigEndpoint.getInheritedType().then(result => {
      this.typeInherited = result;
      if (this._markers) {
        const groups = this._markers.map(marker => marker.get('group'));
        if (groups && groups.length) {
          this.getItemsByMapVisualization(this.typeViewMap, _.cloneDeep(groups)).then( items => {
            this.items = items;
            console.log('items N. Items ' + this.items.length, new Date())
            this.isLoading = false;
          });
        }
      }
    });
    console.log('ngOnInit N. Items ' + this.items.length, new Date())
  }

这是html：

<div class="flex-cards" [ngStyle]="{'max-height': maxHeight}" [class.columnWrap]="isClusterInside" [appLoading]="isLoading">
  <div (click)="expand()" *ngIf="isClusterInside" class="grid-expand">
    <img class="filter-grey" src="assets/images/expand_cluster.svg" alt="Expand" style="width: 100%; height: 100%;margin-left: 4px">
    <p class="text-expand" style="margin-bottom: 10px">
      Expandir
    </p>
  </div>
  <section class="card" style="height: calc(100% - 12px); overflow-y: auto;">
    <div class="content-card">
      <div *ngFor="let item of items">
        {{item.text}}
      </div>
    </div>
  </section>
</div>

你知道为什么要花这么长时间才能呈现这个列表吗？这是随机发生的。