函数完成执行后，绘图图消失

Question

单击按钮时未显示绘图图，但是在函数上应用断点时，该图将在函数执行时显示，而在函数执行完成时消失。 当func函数正在执行时，当我们应用断点时会显示与该值对应的图形，但在func完成执行时不会显示。 html文件是testfunc.component.html。 js文件id testfunc.component.ts

import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
import * as Plotly from 'plotly.js';
import {Config, Data, Layout} from 'plotly.js';

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

@ViewChild('plotDiv')
  plotDiv: ElementRef;

@ViewChild('plotDiv2')
  plotDiv2:ElementRef;

@ViewChild('plotDiv3')
  plotDiv3:ElementRef;

@ViewChild('plotDiv4')
  plotDiv4:ElementRef;

  constructor() { }

  ngOnInit() {
    
  }
    val='Linear';
    public show:boolean = false;
    public buttonNamelog:any = 'Show';
    public buttonNamelinear:any = 'Hide';

   func(event,val){
    console.log(event);
    console.log(val);

      if(val=='Linear')
      {
        console.log("plot hua");
        this.plotLinearCalibrationCurve();
      }

      else if(val=='Log')
       {
        console.log("plot hua 2");
        this.plotLogCalibrationCurve();
       }

    this.val=val;
  }

  toggle() {
    this.show = !this.show;

    if(this.show)  {
      this.plotLinearCalibrationCurve();
      this.buttonNamelog = "Hide";
      this.buttonNamelinear = "Show";
    }
    else{
      this.plotLogCalibrationCurve();
      this.buttonNamelog = "Show";
      this.buttonNamelinear = "Hide";
    }
  }

 plotLinearCalibrationCurve(){ 
   console.log("plot starts");
    let data = [{ x: [1.86847506959731,
                        1.86847506959731,
                        1.90173602675496,
                        1.9086440476136,
                        1.91606063929495,
                        1.9302952476294,
                        1.93324759370438,
                        1.94530437395854,
                        1.98985524850596,
                        2.05414232854343,
                        2.10881882608735,
                        2.33966784509312,
                        2.34111159461593,
                        2.34111159461593,
                        2.46751909076823,
                        3.81121572234882,
                        3.84577288750813,
                        5.22901588560763,
                        6.50540597390556,
                        8.3747069172046
                        ], y: [1.45134311084466, 1.03475496462703, 3.11769569571516, 4.9506835390727,
                          3.42380466555587, 1.72912408674257, 3.01571491752108, 2.05722891070357, 1.19885736718508,
                          2.87957391133716, 2.28451940327991, 2.45115466176696, 2.74743215135693, 2.16554182872015,
                          2.83041651008348, 3.50762220057485, 1.45134311084466, 1.97207829361669, 1.45134311084466,
                          4.22865296404832

                      ],  type: 'scatter', name: '2014', hoverinfo: 'text+x+y',
                                    mode: 'markers', marker: {color: 'rgba(200, 50, 100, .7)', size: 16}
                                  }];

              let layout1 = { 
                  hovermode:'closest',
                  title:'Pathway Enrichment LOG',
                  xaxis:{ hoverformat: '.2r',title:'PATHWAY IMPACT FACTOR',color:'#7672C4',showline:true,zeroline:false, linecolor:'#7672C4'},
                  yaxis:{ hoverformat: '.2r',title:'PVAL',color:'#7672C4',showline:true, zeroline:false, linecolor:'#7672C4'},
                  width:500,
                  height:400,
                  t:0,
                  anchor:'free',
                  position:1,
                  titlefont:{color:"#7672C4"},
                  
                      
              };

          

    Plotly.newPlot(this.plotDiv.nativeElement,data, layout1);
   

            }

            plotLogCalibrationCurve(){
              console.log("plot starts2");

              let data = [{ x: [1.86847506959731,
                1.86847506959731,
                1.90173602675496,
                1.9086440476136,
                1.91606063929495,
                1.9302952476294,
                1.93324759370438,
                1.94530437395854,
                1.98985524850596,
                2.05414232854343,
                2.10881882608735,
                2.33966784509312,
                2.34111159461593,
                2.34111159461593,
                2.46751909076823,
                3.81121572234882,
                3.84577288750813,
                5.22901588560763,
                6.50540597390556,
                8.3747069172046
                ], y: [1.45134311084466, 1.03475496462703, 3.11769569571516, 4.9506835390727,
                  3.42380466555587, 1.72912408674257, 3.01571491752108, 2.05722891070357, 1.19885736718508,
                  2.87957391133716, 2.28451940327991, 2.45115466176696, 2.74743215135693, 2.16554182872015,
                  2.83041651008348, 3.50762220057485, 1.45134311084466, 1.97207829361669, 1.45134311084466,
                  4.22865296404832

              ],  type: 'scatter', name: '2014', hoverinfo: 'text+x+y',
                            mode: 'markers', marker: {color: 'rgba(200, 50, 100, .7)', size: 16}
                          }];
              

              let layout2 = { 
                hovermode:'closest',
                title:'Pathway Enrichment LINEAR',
                xaxis:{ hoverformat: '.2r',title:'PATHWAY IMPACT FACTOR',color:'#7672C4',showline:true,zeroline:false, linecolor:'#7672C4'},
                yaxis:{ hoverformat: '.2r',title:'PVAL',color:'#7672C4',showline:true, zeroline:false, linecolor:'#7672C4'},
                width:500,
                height:400,
                t:0,
                anchor:'free',
                position:1,
                titlefont:{color:"#7672C4"},
              };
                Plotly.newPlot(this.plotDiv2.nativeElement,data, layout2);
                
                    
          

            }
}

<button #log value="Log" (click)="func($event,log.value)">Log</button>
<button #linear value="Linear" (click)="func($event,linear.value)">Linear</button>


<ng-container  *ngIf = "val == 'Log'" >
    <p>First</p>
    <div  id="plotDiv" #plotDiv></div>
</ng-container>
   
<ng-container  *ngIf =" val == 'Linear'" >
    <p>Second</p>
    <div id="plotDiv2" #plotDiv2></div>
</ng-container>