After running this code, I noticed that instead of values, I am receiving the object names.
export class PrescriberComponent implements OnInit {
constructor() { }
people = [
{id: 1, forename: 'John', surname: 'Doe'},
{id: 2, forename: 'John', surname: 'Smith'},
{id: 3, forename: 'Peter', surname: 'Scott'},
{id: 4, forename: 'Sue', surname: 'Reece'}
];
PrintDoc1() : void {
var originalContents = `
<table border="3" width="50%" cellpadding="2" cellspacing="3">
<tr>
<th colspan="2">
<h2>table title</h2>
</th>
</tr>
<tr>
<th>First Name</th>
</tr>
<tr *ngFor="person in this.people">
<td>{{person.forename}}</td>
</tr>
</table>
`;
console.log(originalContents);
var popupWin = window.open('', '_blank', 'width=600,height=600,scrollbars=no,menubar=no,toolbar=no,location=center,status=no,titlebar=no');
popupWin.window.focus();
popupWin.document.write('<!DOCTYPE html><html><head>' +
'<link rel="stylesheet" type="text/css" href="style.css" />' +
'</head><body onload="window.print()"><div class="reward-body">' + originalContents + '</div></html>');
popupWin.document.close();
}
}
<button type="button" style="color: #ffffff;background-color: #28afde" (click)="PrintDoc1()">PRINT</button>
When analyzing the output, it appears that only the object names are displayed instead of the actual values. I suspect that the issue lies with *ngFor and interpolation not functioning correctly in this context.