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}
    }) 
}

这将引发错误，对于函数draw中的行TypeError: Cannot read property 'getContext' of null来说是var ctx = canvas.getContext("2d");。看来material-tabs不等待数据可用。我试图通过“ isReady”来解决这个问题，但是没有运气。

[我注意到的一件奇怪的事，当我将[selectedIndex]="0"更改为[selectedIndex]="1"时，它可以工作。但是不能认为这是因为第一个选项卡应根据要求在加载时处于活动状态。

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

Answer 1

example

component.html

<canvas #chart></canvas>

component.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");
      }
    }