None None -4 years ago 54
TypeScript Question

How to add loop in print template?

I have this print method:

print(data): void {
console.log(data);
let printContents, popupWin;
popupWin = window.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body onload="window.print()">
<table>
<tr>
<th>Šifra usluge</th>
<th>Naziv usluge</th>
<th>Datum dospijeca</th>
<th>Iznos rate</th>
</tr>
for (let entry of someArray) {
<tr>
<td>{{entry.name}}}</td>
<td>{{entry.code}}</td>
<td>{{entry.something}}</td>
<td>{{entry.something2}}</td>
</tr>
}


</table>
</body>
</html>`
);
popupWin.document.close();
}


What i want is to add this loop in template to display in tr all data. Any suggestion how can i do that?

Answer Source

Try this :

print(data): void {
    console.log(data);
  let printContents, popupWin;
    popupWin = window.open();
    var trHtml = "";
    for (let entry of someArray) {
        trHtml += `<tr>
                        <td>`+entry.name+`</td>
                        <td>`+entry.code+`</td>
                        <td>`+entry.something+`</td>
                        <td>`+entry.something2+`</td>
                    </tr>`;
    }
    popupWin.document.write(`
    <html>
        <head>
        <title>Print tab</title>
        <style>
            table {
                font-family: arial, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }

            td, th {
                border: 1px solid #dddddd;
                text-align: left;
                padding: 8px;
            }

            tr:nth-child(even) {
                background-color: #dddddd;
            }
        </style>
        </head>
    <body onload="window.print()">
       <table>
        <tr>
            <th>Šifra usluge</th>
            <th>Naziv usluge</th>
            <th>Datum dospijeca</th>
            <th>Iznos rate</th>
        </tr>
        `+trHtml+`
        </table>
    </body>
    </html>`
    );
    popupWin.document.close();
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download