Angular 7 - 使用嵌套材质选项卡进行延迟加载

Question

在我的 angular-7 项目中，我正在尝试制作一个带有嵌套材料选项卡的 html 页面，其中第二个选项卡将有另一组选项卡。在第二个选项卡中，尝试为传递给子组件的数据制作画布图表。

这是我的 html 代码。

<mat-tab-group mat-stretch-tabs [selectedIndex]="0">
    <mat-tab label="Sales"> Sales            
    </mat-tab>

    <mat-tab label="Purchase">
        <!-- <ng-template matTabContent>               //This block works but i want in tab format
            <div *ngIf="isReady " class="divinput ">
                <div *ngFor="let d of data">
                    <draw [input]="d "></draw>
                </div>
            </div>
        </ng-template> -->

        <mat-tab-group *ngIf="isReady">                   // this throws error
            <mat-tab *ngIf="isReady" label="north">
                <ng-template matTabContent>
                    <div *ngFor="let d of data">
                        <draw [input]="d"></draw>
                    </div>
                </ng-template>
            </mat-tab>
        </mat-tab-group>

    </mat-tab>
</mat-tab-group>

上面的代码调用了一个子组件“draw”，它具有绘制图表的功能。

private draw (chart){ 
    var canvas = <HTMLCanvasElement> document.getElementById(chart.id);
    var ctx = canvas.getContext("2d");
    return new Chart(ctx, {
        type: 'line',
        data: {labels: chart.x,datasets: mydata}
    }) 
}

这会引发错误，TypeError: Cannot read property 'getContext' of null for line var ctx = canvas.getContext("2d"); in function draw。看起来材料选项卡不等待数据可用。我试图通过“isReady”来处理这个问题，但没有运气。

我注意到一件奇怪的事情，当我将 [selectedIndex]="0" 更改为 [selectedIndex]="1" 时它会起作用。但不能将此视为第一个选项卡应根据要求在加载时处于活动状态。

我努力找出问题所在。请帮助解决问题。

Answer 1

在 Angular 中，您可以使用 ViewChild 而不是 getElementById 来获取画布

在 Angular 7 中，它将按如下方式工作

example

component.html

<canvas #chart></canvas>

组件.ts

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

    @Component({
      selector: 'app-draw',
      templateUrl: './draw.component.html',
      styleUrls: ['./draw.component.css']
    })
    export class DrawComponent implements OnInit {

      @ViewChild('chart')
      chartElementRef: ElementRef<HTMLCanvasElement>;

      @Input()
      input: any;

      constructor() { }

      ngOnInit() {
        this.draw();
      }

      private draw () { 
        const canvas = this.chartElementRef.nativeElement;
        const ctx = canvas.getContext("2d");
      }
    }