Angular 4如何在表

Question

我正在玩Angular 4，但在互联网上找不到合适的答案。所以想知道这里是否有人知道我的帮助。想要将整个新表行推送到此表。我想要两行四个项而不是一行。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;