Html 如何在Angular 2中的打印组件上正确添加插值？_Html_Angular_Typescript_Data Binding_Interpolation

Html 如何在Angular 2中的打印组件上正确添加插值？

html angular typescript data-binding

Html 如何在Angular 2中的打印组件上正确添加插值？,html,angular,typescript,data-binding,interpolation,Html,Angular,Typescript,Data Binding,Interpolation,在我的模板中包含*ngFor时，发票在打印时变为空白。此外，插值对它不起作用。我正在从另一个组件获取数据。当我调试数据时，数据正在正确接收。我在构造函数中初始化了另一个名为name的属性，它开始工作 constructor (){ this.printData = {}; this.printData.name = 'User'; } 但我无法显示来自其他来源的数据。这是否与innerHtml或其他相关的问题有关 invoice.component.ts 从'@angular/core'导

在我的模板中包含*ngFor时，发票在打印时变为空白。此外，插值对它不起作用。我正在从另一个组件获取数据。当我调试数据时，数据正在正确接收。我在构造函数中初始化了另一个名为name的属性，它开始工作

constructor (){
this.printData = {};
this.printData.name = 'User';
}

但我无法显示来自其他来源的数据。这是否与innerHtml或其他相关的问题有关

invoice.component.ts

从'@angular/core'导入{Component}；
@组成部分({
moduleId:module.id，
选择器：“应用程序发票”，
templateUrl:“./invoice.component.html”，
样式URL:['./invoice.component.css']
})
导出类发票组件{
打印数据：任何；
构造函数（）{
this.printData={}；
}
print（data:any）：void{//从另一个组件获取数据。
控制台日志（“打印发票”）；
如果（数据）{
让stringified=JSON.stringify（数据）；
this.printData=JSON.parse（stringified）；
console.log（“加载到打印的数据”）；
}
这个.startPrint（'printSectionId'）；
}
startPrint（printSectionId:string）{
让popupindow进来；
让innerContents=document.getElementById（printSectionId）.innerHTML；
popupWinindow=window.open（“”，“”空白，“”宽度=600，高度=700，滚动条=no，菜单栏=no，工具栏=no，位置=no，状态=no，标题栏=no'）；
popupwindow.document.open（）；
popupwindow.document.write（“”+innerContents+“”）；
popupwindow.document.close（）；
}
}

invoice.component.html


公司名称
说明文字
地址

发票联


序列号：{{printData.serialNo}}日期：{{printData.Date}
项目名称：{{Item.name}
数量：{{item.Quantity}

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-invoice',
  templateUrl: './invoice.component.html',
  styleUrls: ['./invoice.component.css']
})
export class InvoiceComponent  {
  printData:any;
  constructor() {
    this.printData = {};
  }
  print(data:any): void {         //Getting data from another component.
    console.log('Print Invoice');
    if(data) {
      let stringified = JSON.stringify(data);
      this.printData = JSON.parse(stringified);
      console.log('Data loaded to print');
  }
      this.startPrint('printSectionId');

}
  startPrint(printSectionId: string){
          let popupWinindow;
          let innerContents = document.getElementById(printSectionId).innerHTML;
          popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
          popupWinindow.document.open();
          popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + innerContents + '</html>');
          popupWinindow.document.close();
    }

}

  <div id="printSectionId" >
      <div  *ngFor="let item of printData.items"  >

  <pre style="line-height:0.5; text-align: justify;  text-justify: inter-word;">
      <div style="text-align: center"><b><h3>Company Name</h3></b></div >
      <div style="text-align: center">Caption</div >
      <div style="text-align: center">Address</div >

      <hr>
      <div style="text-align: center"><b>Invoice</b></div >
      <br>
      Serial No: {{printData.serialNo}}         Date:{{printData.date}}

      Item name: {{item.name}}
      Quantity: {{item.quantity}}

  </pre>
     </div>

  </div>