Возьмите холст @ViewChild, у которого есть * ngIf - PullRequest
Новая
       84

Возьмите холст @ViewChild, у которого есть * ngIf

0 голосов
/ 05 августа 2020
• 1000 of undefined ".

Я пытаюсь получить элемент холста из HTML в Typescript с помощью viewChild и на Canvas, у меня также есть директива * ngIf. И, в конце концов, я хотел бы установить этот цвет фона моего графика как градиент.

Вот то, что я пытался сделать до сих пор, но безуспешно. Если у вас есть идеи, я был бы очень признателен.

HTML

<ion-content>
  <ion-row class="ion-padding">
    <ion-col>
      <ion-spinner *ngIf="graphLoading"></ion-spinner>
      <ion-text
        *ngIf="!graphLoading && (bioValueData.length === 0 || timePeriodLabels.length ===0)"
        >No data available for the selected period
      </ion-text>
      <canvas
        #bioGraph
        *ngIf="!graphLoading && bioValueData.length !== 0 && timePeriodLabels.length !== 0"
        baseChart
        [datasets]="biomarkerValueData"
        [options]="lineChartOptions"
        [legend]="lineChartLegend"
        [chartType]="lineChartType"
        [labels]="timePeriodLabels"
        [colors]="chartColors"
      ></canvas>
    </ion-col>
  </ion-row>
</ion-content>

TS 

 private bioGraph: ElementRef;
 @ViewChild("bioGraph", { static: false }) set content(
    content: ElementRef
  ) {
    if (content) {
      this.bioGraph = content;
    }
  }

  ngAfterViewInit(): void {
    console.log(this.bioGraph);
    const ctx = (<HTMLCanvasElement>(
      this.bioGraph.nativeElement
    )).getContext("2d");

    const gradientFill = ctx.createLinearGradient(500, 0, 100, 0);
    gradientFill.addColorStop(0, "rgba(128, 182, 244, 0.6)");
    gradientFill.addColorStop(1, "rgba(244, 144, 128, 0.6)");
    this.chartColors = [
      {
        backgroundColor: gradientFill,
      },
    ];
  }
...