2017-06-12 5 views
-1

Ich habe diese Druckmethode:Wie wird eine Schleife in der Druckvorlage hinzugefügt?

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(); 
} 

Was ich will, ist diese Schleife in Vorlage hinzufügen in tr alle Daten anzuzeigen. Irgendein Vorschlag wie kann ich das tun?

+1

ein Komponenten Verwenden Sie statt 'document.write'. Das ist die ganze Ideologie hinter eckigen –

+0

Schlechte Idee, 'document.write' zu ​​verwenden. Stattdessen erstellen Sie eine separate Komponente und verwenden Sie [ng-for] (https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html) Direktive – Ajax

Antwort

1

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(); 
} 
+0

Ich bekomme eine leere Daten ... nur anzeigen trHtml – None

+0

versuchen Sie es jetzt @None –

+0

jetzt füllt Tabelle aber wie folgt: {{entry.name}} {{entry.code}} und so weiter ... es wird nicht nur Daten mit {{}} – None

Verwandte Themen