Boa noite, estou tendo um problema em um projeto na hora de exibição de dados em uma table.
tenho o meu painel.component.ts
import { Component } from '@angular/core';
import { Http } from '@angular/http';
@Component({
moduleId: module.id,
selector: 'painel',
templateUrl: './painel.component.html'
})
export class PainelComponent {
arquivos: Object[] = [];
constructor(http: Http){
http.get('/api/dados')
.map(res => res.json())
.subscribe(files => {
this.arquivos = files;
}, error => console.log(error));
}
}
e tenho o painel.component.html
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>Nome</th>
<th>Tipo</th>
<th>Data de upload</th>
<th>Tamanho</th>
</tr>
</thead>
<tbody>
<arquivo *ngFor="let item of arquivos"
[nome]="item.name" [tipo]="item.extension" [data]="item.uploadDate" [tamanho]="item.size">
</arquivo>
</tbody>
</table>
</div>
o meu arquivo.component.ts
import { Component, Input } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'arquivo',
templateUrl: './arquivo.component.html'
})
export class ArquivoComponent {
@Input() nome:string;
@Input() tipo:string;
@Input() data:string;
@Input() tamanho:number;
}
e o meu arquivo.component.html
<tr>
<td>{{nome}}</td>
<td>{{tipo}}</td>
<td>{{data}}</td>
<td>{{tamanho}}</td>
</tr>
O meu problema é que na hora de exibir os dados, ele está exibindo dessa forma: Tulipsjpg03/05/2017620888Penguinsjpg18/05/2017777835
Tudo junto, sem pular linha e sem os espaçamentos, como se eu tivesse colocado tudo em uma linha só sem dar nem espaço.
E quando eu vou inspecionar no F12 no Chrome, eu vejo o html da seguinte forma:
<tbody>
<!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->
<arquivo ng-reflect-nome="Tulips" ng-reflect-tipo="jpg" ng-reflect-data="03/05/2017" ng-reflect-tamanho="620888">
<tr>
<td>Tulips</td>
<td>jpg</td>
<td>03/05/2017</td>
<td>620888</td>
</tr>
</arquivo>
<arquivo ng-reflect-nome="Penguins" ng-reflect-tipo="jpg" ng-reflect-data="18/05/2017" ng-reflect-tamanho="777835">
<tr>
<td>Penguins</td>
<td>jpg</td>
<td>18/05/2017</td>
<td>777835</td>
</tr>
</arquivo>
</tbody>
Será que alguém poderia me dar 1 luz para eu saber onde estou errando?
Obrigado.