2017-06-12 15 views
-1

私はこの印刷方法があります。私が欲しいもの印刷テンプレートにループを追加する方法は?

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

はTR内のすべてのデータを表示するためのテンプレートで、このループを追加することです。どのように私はそれを行うことができますどのような提案?

+1

ではなくdocument.write' 'のコンポーネントを使用してください。それは角の背後にある全体のイデオロギーです。 –

+0

'document.write'を使うのは悪い考えです。代わりに別のコンポーネントを作成し、[ng-for](https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html)ディレクティブ – Ajax

答えて

1

はこれを試してみてください:

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

を使用して空のデータを取得する...表示のみtrHtml – None

+0

これを今すぐ試してください@None –

+0

はテーブルを作成しますが、{{entry.name}} {{entry.code}}など... {{}}でしかデータが得られない – None

関連する問題