*ngIf 内的 viewChild 导致未定义的引用 [重复]

Question

从ngrx+ api http请求请求数据时我想做一个加载

我有一个包含加载布尔值的状态，另一个包含原始数据。

当数据到达时，我将 loading 设置为 false。

问题viewChild 找不到参考，因为数据在加载之前到达设置为假。

我得到错误

ERROR TypeError: Cannot read property 'nativeElement' of undefined

这是模板

<div *ngIf="isLoading; else kpi"><mat-spinner></mat-spinner></div>
<ng-template #kpi>
  <div class="chartWrapper">
    <div class="scrollArea">
      <div class="chartAreaWrapper">
        <canvas #lineChart id="lineChart" width="1200" height="400"></canvas>
      </div>
    </div>
    <canvas #stickyAxis id="chartAxis" height="400" width="0"></canvas>
  </div>
</ng-template>

在组件中

export class BranchKpisComponent implements OnChanges, OnInit, OnDestroy {
  @ViewChild('lineChart', { static: true }) private chartRef;

我正在使用 ngrx 商店

我有选择器

selectLoadings$ = this.store.pipe(select(selectLoadings));
selectedDataByBranch$ = this.store.pipe(
 select(selectBranchDirections, {
   branchId: this.branchId,
   location: 'directionsByBranch',
   dir: 0
 })

在ngOnchange()里面我订阅了loading和data observable（分开）

this.selectLoadings$.subscribe(
  loading => (this.isLoading = loading.directionsByBranch[this.branchId])
);

this.selectedDataByBranch$
      .pipe(filter(data => Object.keys(data).length > 0))
      .subscribe(selectedDataByBranch => {
        this.trainsDatasets = this.getDatasets(selectedDataByBranch);
        this.context = this.chartRef.nativeElement; ### Error undefined chartRef

当我获取数据时在减速器内部我将加载设置为 false

case ESchedulesActions.GetAllSchedulesByDirectionSuccess: {
  return {
    ...state,
    directionsByBranch: {
      ...state.directionsByBranch,
      [action.payload[1]]: action.payload[0]
    },
    loadings: {
      ...state.loadings,
      directionsByBranch: {
        ...state.loadings.directionsByBranch,
        [action.payload[1]]: false
      }
    }
  };
}

Answer 1

您可以使用 [hidden] 代替 *ngIf。它仍然会有你想要在 DOM 中查看的元素。需要另一个而不是相反的 else。

<div [hidden]="!isLoading"><mat-spinner></mat-spinner></div>
<ng-template [hidden]="isLoading">
  <div class="chartWrapper">
    <div class="scrollArea">
      <div class="chartAreaWrapper">
        <canvas #lineChart id="lineChart" width="1200" height="400"></canvas>
      </div>
    </div>
    <canvas #stickyAxis id="chartAxis" height="400" width="0"></canvas>
  </div>
</ng-template>

就性能而言，由于代码的大小，根本不会有太大差异。

Answer 2

viewChild 应该这样实现。综上所述，我认为您以错误的方式实现了 viewChild。

import { Component,
         ViewChild,
         AfterViewInit,
         ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('someInput') someInput: ElementRef;

  ngAfterViewInit() {
    this.someInput.nativeElement.value = "Anchovies! ??";
  }
}

所以你更新的代码块将是

export class BranchKpisComponent implements OnChanges, OnInit, OnDestroy {
  @ViewChild('lineChart', { static: true }) chartRef:ElementRef;

别忘了导入ElementRef