Question

在我的Angular程序中，我希望能够单击一个按钮，然后打开一个窗口，显示该月的报告或摘要，并且已成功完成，但由于某些原因我无法包含变量。每当我在我的html文本中有Report for date {{monthlyEndDate}}时，它就会在不使用绑定的情况下打印出来。我怎么能做到这一点？

这是我的.ts文件，我的按钮只调用printMonthlyReport()函数：

import { Component, OnInit } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { EmpInfo } from './emp-info';
import { EmpInfoService } from './emp-info.service';
import { PTOData } from './pto-data';
import { PTODataService } from './pto-data.service';

@Component({
    selector: 'pto-report',
    templateUrl: `./report.component.html`,
    styleUrls: ['./report.component.css']
})

export class ReportComponent {

    date = new Date();
    monthlyStartDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1);
    monthlyEndDate = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0);
    
    printMonthlyReport(): void {
        let popupWin;
        popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
        popupWin.document.open();
        popupWin.document.write(`
          <html>
            <head>
              <title>Monthly PTO/ETO Report</title>
            </head>
            <body>
              <h3>Monthly PTO/ETO Payroll Report {{monthlyEndDate}}</h3>
            </body>
          </html>
`)
    }
}

Answer 1

你应该使用

`bla bla ${this.fieldName} bla bla`

因此，使用this访问字段变量，并将变量包装在${}内的模板字符串中（``）

popupWin.document.write(`
      <html>
        <head>
          <title>Monthly PTO/ETO Report</title>
        </head>
        <body>
          <h3>Monthly PTO/ETO Payroll Report ${this.monthlyEndDate}</h3>
        </body>
      </html>
`)

使用变量写入txt文件

1 个答案: