Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Utilizando o ngFor

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.

2 respostas

Olá, Felipe.

Tudo bom? No painel.component.ts adiciona um console.log para vermos como está chegando os dados da API:

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;
    console.log(this.arquivos);
      }, error => console.log(error));
  }

 }

Por favor, depois me fala como foi a saída no console?

solução!

Oi Marco, eu fiz o que você recomendou, segue:

(2) [Object, Object]
    0:Object
        extension:"jpg"
        name:"Tulips"
        size:620888
        uploadDate:"03/05/2017"
        __proto__:Object
    1:Object
        extension:"jpg"
        name:"Penguins"
        size:777835
        uploadDate:"18/05/2017"
        __proto__:Object
    length:2
    __proto__:Array(0)