Question

如何更改点击的值以便反映点击？

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div id="print-section">
        Test print {{ name }}
      </div>
      <button (click)="print()">print</button>
    </div>
  `,
})
export class App {
  name:string;

  name="Red";

  constructor() {
  }


  print(): void {
    let printContents, popupWin;

    this.name="Blue";

    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=700,width=1000');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <style>
          //........Customized style.......
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}


}

这里我声明了name =＆＃34; Red＆＃34 ;;点击打印后它应该是蓝色。但它在第一次点击时保持不变。它在第二次点击中改变

这是链接：

https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview

Answer 1

this.name="Blue";

printContents = document.getElementById('print-section').innerHTML;

您的代码同步运行，因此在您的同步任务完成之前，DOM不会更新。

您可以使用

this.name="Blue";

setTimeout(() => {
  printContents = document.getElementById('print-section').innerHTML;
  // ... rest of your iframe code
});

让它发挥作用。但是，它不是一个可靠的设计选择。

如何更改点击价值？

1 个答案: