onPrint當我嘗試單擊按鈕時，我想顯示一個人的資訊。現在，它只是不顯示在列印預覽中。
密碼箱
onPrint(list: any) {
this.selectedInfo = list;
print();
}
<div *ngFor="let list of lists; trackBy: trackByFn">
<td>
{{ list.name }} -
<button type="button" (click)="onPrint(list)">Print</button>
</td>
</div>
<div id="printSection">
<h1>SAMPLE HEADER TITLE</h1>
<div>{{ selectedInfo.name }}</div>
<div>{{ selectedInfo.description }}</div>
</div>
uj5u.com熱心網友回復：
更新：
OP 更改了問題，并從問題中洗掉了反應形式（根據他在我的回答中的評論）。對于最新的更改，它需要一個超時，因為print()函式在 UI 元素被渲染之前執行。setTimeout() 將添加一些延遲并允許渲染添加 UI 元素。
onPrint(list: any) {
this.selectedInfo = list;
setTimeout(() => { print() }, 1000);
}
Stackblitz：https ://codesandbox.io/s/hardcore-https-dch04h
原來的：
Stackblitz 中存在不匹配的表單名稱（displayForm在組件中，但printForm在 html 中）和一些編碼問題。我已經清理了大部分。
另外，我認為最好將表單拆分為一對一映射表單和串列欄位。使與他們每個人一起作業變得更容易。
此處提供完整更改： https ://codesandbox.io/s/crazy-bassi-e6042s
app.component.ts：
constructor(private formBuilder: FormBuilder) {
this.displayForm = this.formBuilder.group({
name: ["", Validators.required],
desc: ["", Validators.required]
});
}
onPrint(list: { name: string; description: string }) {
console.log(list);
this.displayForm.controls.name.setValue(list.name);
this.displayForm.controls.desc.setValue(list.description);
console.log(this.displayForm.controls.name.value);
console.log(this.displayForm.controls.desc.value);
print();
}
app.component.html：
<div id="printSection">
<form [formGroup]="displayForm">
<h1>SAMPLE HEADER TITLE</h1>
<div>{{ displayForm?.controls?.name?.value }}</div>
<div>{{ displayForm?.controls?.desc?.value }}</div>
</form>
</div>
uj5u.com熱心網友回復：
問題是您嘗試列印的內容未呈現。在列印螢屏之前，您需要等待。此外，在將物件分配給表單控制元件時，您應該首先創建一個表單組。我認為 setTimeout() 函式會幫助你..
您可以在此處查看示例
onPrint(list: {}) {
this.displayForm.get('info').setValue(list);
setTimeout(() => {
print();
}, 50);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/490237.html