不更新 HTML 角度 5/6 中的值

我无法检测到这种情况的变化。

下面是代码 ts 和 html。

print(){ 
this.hideBoolean = true;
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<style>
body{  width: 99%;}
label { font-weight: 400;
font-size: 13px;
padding: 2px;
margin-bottom: 5px;
}
table, td, th {
border: 1px solid silver;
}
table td {
font-size: 13px;
}
table th {
font-size: 13px;
}
table {
border-collapse: collapse;
width: 98%;
}
th {
height: 26px;
}
</style>
</head>
<body onload="window.print();window.close()">${printContents}</body>
</html>`
);
popupWin.document.close();
}

--------------.HTML------------

<button type="button" (click)="print()"> Print</button> 
<div id="print-section" >
<div *ngIf="hideBoolean"> value .</div>

所以主要问题是在单击按钮时。布尔值工作不正常，第一次单击不起作用第二次单击后它将起作用。我没有得到正确的问题？有人帮我。！谢谢

好的，评论之后，我终于解决了问题。

您的网页：

<span (click)="printSingle()" class="btn">Print single</span>
<span (click)="printDouble()" class="btn">Print Double</span>
<div id="print-section">
single print
<div *ngIf="showHideDiv">double print</div>
</div>

您的 TS：

import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular';
showHideDiv = false;
constructor(private  changeDetectorRef: ChangeDetectorRef){}
toggle(){
this.showHideDiv = !this.showHideDiv;
}
printDouble(){
this.showHideDiv= true;
this.changeDetectorRef.detectChanges();
this.print();
}
printSingle(){
this.showHideDiv= false;
this.changeDetectorRef.detectChanges();
this.print();
}
print(){ 
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<style>
body{  width: 99%;}
label { font-weight: 400;
font-size: 13px;
padding: 2px;
margin-bottom: 5px;
}
table, td, th {
border: 1px solid silver;
}
table td {
font-size: 13px;
}
table th {
font-size: 13px;
}
table {
border-collapse: collapse;
width: 98%;
}
th {
height: 26px;
}
</style>
</head>
<body onload="window.print();window.close()">${printContents}</body>
</html>`
);
popupWin.document.close();
}
}

我添加了changeDetectorRef并以这种方式使用它，因为它的作用是强制(基本上(渲染某些被阻止的部分。让我知道这是否解决了，但在以这种方式编辑的堆栈闪电战中，它工作正常。

相关内容

最新更新

热门标签：