角4テーブル全体を押し込む方法

Question

私は角4で遊んでいますが、インターネット上で正解を見つけることができませんでした。だからここに誰かが私を少し助けてくれる知識があるのだろうかと思っていた。新しい表の行全体をこの表にプッシュしたい私は1行の代わりに4行の2行を必要とします。

export class AppComponent { 
 
    \t title = 'First Angular Assignment'; 
 
    \t balances: string[]; 
 

 
    \t constructor() { 
 
    \t \t this.balances = [ 
 
     "Zorgtoeslag", "60", "Verzekering", "80", /* first row*/ 
 
     "Zorgtoeslag", "60", "Verzekering", "80", /* second row and so on */ 
 
     ]; 
 
    \t } 
 
}

<table> 
 
    \t <tr> 
 
    \t \t <th>Inkomsten</th> 
 
    \t \t <th></th> 
 
    \t \t <th>Uitgaven</th> 
 
    \t \t <th></th> 
 
    \t </tr> 
 
    <tr > 
 
     <td *ngFor = "let balance of balances;"> 
 
     \t {{balance}} 
 
     </td> 
 
    </tr> 
 
</table>

Answer 1

コンストラクタに示したようにあなたは、あなたのデータの収集を使用する必要がありますしかし、あなたは以下のコード

this.data = []; 

for(let i =0 ;i<this.balances.length; i+=4){ 
     this.data.push({Inkomsten : this.balances[i] d1 :this.balances[i+1], 
     Verzekering :this.balances[i+2],d2:this.balances[i+3]}) 
    } 
} 

    <tr *ngFor = "let d of data"> 
     <td>{{d.Inkomsten}}</td> 
     <td>{{d.d1}}</td> 
     <td>{{d.Verzekering }}</td> 
     <td>{{d.d2}}</td> 
    </tr> 

LIVE DEMOを使用してspecifcフォーマットにもたらすことができます

Answer 2

export class AppComponent { 
 
title = 'First Angular Assignment'; 
 
balances : [{ 
 
    \t \t costdesc: string, 
 
    \t \t cost: Number, 
 
    \t \t expensedesc: string, 
 
    \t \t expense: Number 
 
    \t }]; 
 
    \t constructor() { 
 
    \t \t this.balances = [{ 
 
    \t \t \t costdesc: "Salaris", 
 
\t \t \t cost: 2200, 
 
\t \t \t expensedesc: "Boodschappen", 
 
\t \t \t expense: 300 
 
    \t \t }, 
 
    \t \t { 
 
    \t \t \t costdesc: "Zorgtoeslag", 
 
\t \t \t cost: 60, 
 
\t \t \t expensedesc: "Verzekering", 
 
\t \t \t expense: 80 
 
\t \t }, 
 
\t \t { 
 
    \t \t \t costdesc: null, 
 
\t \t \t cost: null, 
 
\t \t \t expensedesc: "Telefoon", 
 
\t \t \t expense: 30 
 
\t \t }, 
 
\t \t { 
 
    \t \t \t costdesc: null, 
 
\t \t \t cost: null, 
 
\t \t \t expensedesc: "Hypotheek", 
 
\t \t \t expense: 400 
 
\t \t }, 
 
\t \t { 
 
    \t \t \t costdesc: null, 
 
\t \t \t cost: null, 
 
\t \t \t expensedesc: "TV/Internet", 
 
\t \t \t expense: 40 
 
\t \t }]; 
 
    \t } 
 
}

\t <thead> 
 
\t  \t <tr> 
 
\t  \t \t <th>Inkomsten</th> 
 
\t  \t \t <th></th> 
 
\t  \t \t <th>Uitgaven</th> 
 
\t  \t \t <th></th> 
 
\t  \t </tr> 
 
    \t </thead> 
 
    \t <tbody> 
 
\t  <tr *ngFor="let balance of balances"> 
 
\t   <td>{{balance.costdesc}}</td> 
 
\t   <td>{{balance.cost}}</td> 
 
\t   <td>{{balance.expensedesc}}</td> 
 
\t   <td>{{balance.expense}}</td> 
 
\t  </tr> 
 
    </tbody>