2017-06-12 23 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