javascript - Dom to Image 插件没有捕获正确的下拉值

Question

我在我的角度应用程序中使用 dom-to-image 插件来捕获 div 的图片。我可以在任何地方捕获 div，除非 div 中有下拉菜单。捕获图像时，我没有捕获到选定的下拉值。我有一个下拉菜单，选项很少。每当我拍摄照片时，第一个选项就会被捕捉到照片中。

html代码

 <div class="row" *ngIf="showStatusViolations">
<div class="col-lg-12 mt-3 mb-3 download-wrap position-relative">
  <app-download [chart_name]="'trend on status violations'">
  </app-download>
  <div class="chart-div graph-div open-violations code-vio cc-area-chart" style="height: 430px">
    <div class="row">
      <div class="col-md-12">
        <h5 class="text-center graph-heading mb-0 pb-0 pt-3">Trend on status of (High/Medium) Violations</h5>

      </div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">
        <div class="form-group mt-1 mr-2">
          <select class="form-control" id="sel2" [(ngModel)]="selectedStatus" (change)="selectedStatusTrendViolation($event.target.value)">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
            <option value="quarterly">Quarterly</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="multi-line-chart-width" style="width: 95%; margin: 0 auto">
        <div class="legend text-center d-flex justify-content-center mb-2" style="width: 
          100%" *ngIf="statusViolations !== null && statusViolations.length !== 0">
          <div class="legend-value">
            <div class="violet mr-1"></div>
            <span>New</span>
          </div>
          <div class="legend-value">
            <div class="blue mr-1"></div>
            <span> Triaged</span>
          </div>
          <div class="legend-value">
            <div class="green mr-1"></div>
            <span> Closed</span>
          </div>
        </div>

        <div style="width: 90%; margin: 0 auto" *ngIf="showOpen">
          <app-ngx-line-resp *ngIf="statusViolations" 
          [chartWidth]="opnViolationGraphDimension" [data]="statusViolations"></app-ngx- 
        line-resp>

        </div>
        <div class="no_datas" *ngIf="statusViolations.length === 0">
          <h5> No Data Available</h5>
        </div>
      </div>
    </div>

  </div>
</div>

应用下载.ts

import { Component, OnInit, Input } from '@angular/core';
import { Utils } from 'src/app/common/pipes/utility';

@Component({
selector: 'app-download',
templateUrl: './download.component.html',
styleUrls: ['./download.component.css']
})

export class DownloadComponent implements OnInit {
@Input() chart_name: any
@Input() data:any
temp_arr:any =[]

constructor(private papa: Papa) {
 }

ngOnInit() {}

dom_to_img(event, chart_name) {
Utils.dom_to_img(event.target, chart_name);
}

}

实用程序.ts

public static dom_to_img(elm, file_name) {
let chart: any = elm.closest(".download-wrap").querySelector('.graph- 
 div');
domtoimage.toPng(chart, { quality: 1, bgcolor: "#fff" })
  .then(function (dataUrl) {
    var link = document.createElement('a');
    link.download = file_name + ".png";
    link.href = dataUrl;
    link.click();
  });
}

我附上了两张图片。第一个显示了 div 是怎样的。它在下拉列表中有每月。第二个图像显示了使用插件捕获的图像。它每天显示在下拉列表中，这实际上是下拉列表中的第一个选项。