1

Estoy intentado mostrar los objetos de que paso de localStorage al controlador del componente. Sin embargo al pasarlos no me muestra nada en la vista.

Este Seria el comoponente.

import {
  Component, OnInit, Input, Output
}
from '@angular/core';
import {
  Router
}
from '@angular/router-deprecated';
import {
  MdButton
}
from '@angular2-material/button';

import {
  Hero
}
from '../shared/services/hero/hero';
import {
  Transaction
}
from '../shared/services/transaction/transaction';
import {
  TransactionService
}
from '../shared/services/transaction/transactions.service';
import {
  HeroService
}
from '../shared/services/hero/hero.service';
import {
  HeroDetailComponent
}
from '../hero-detail/hero-detail.component';
import {
  QuickCardComponent
}
from '../shared/components/quick-card/quick-card.component';

@
Component({
  selector: 'my-heroes',
  templateUrl: 'client/heroes/heroes.component.html',
  styleUrls: ['client/home-root/home-root.component.css', 'client/heroes/heroes.component.css'],
  directives: [QuickCardComponent, HeroDetailComponent, MdButton]
})

export class HeroesComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;
  transactions: Array < Object > ;
  transaction: Transaction;
  errorMessage: string;



  constructor(
    private _heroService: HeroService,
    private _transactionService: TransactionService,
    private _router: Router) {

    this.transactions = new Array();
  }

  ngOnInit() {
    this.getTransactions();
  }


  getTransactions() {
    var localData = JSON.parse(localStorage.getItem('transactions'));
    this.transaction = localData;
    console.log("mostrando el json para la vista:")
    console.log(this.transaction);
  }

cuando hago el console.log me muestra el array de objetos que tengo perfectamente. Pero a la hora de mostrarlo en la vista no los muestra

Esta seria la vista:

<md-content>
  <md-data-table class="shadow2 table-c">
    <thead class="header-table">
      <th class="md-text-cell header-item">Supplier Name</th>
      <th class="md-text-cell header-item sortable">Partner</th>
      <th class="md-text-cell header-item">Date Quoted</th>
      <th class="md-text-cell header-item">Old Gas Supplier</th>
      <th class="md-text-cell header-item">New Gas Supplier</th>
      <th class="md-text-cell header-item">Old Electricity Supplier</th>
      <th class="md-text-cell header-item">New Electricity Supplier</th>
      <th class="md-text-cell header-item">Customer Name</th>
      <th class="md-text-cell header-item">Switch Type</th>
    </thead>
    <tbody>
      <tr class="repeat repeat-fade-in" *ngFor="let transaction of transactions">
        <td class="md-text-cell cell-item">{{transaction?.new_elect_supplier_name}}</td>
        <td class="md-text-cell cell-item">{{transaction?.referrer_branch_name}}</td>
        <td class="md-text-cell cell-item">{{transaction?.switch_confirmed_date}}</td>
        <td class="md-text-cell cell-item">{{ transaction?.old_gas_supplier_name }}</td>
        <td class="md-text-cell cell-item">{{ transaction?.new_gas_supplier_name }}</td>
        <td class="md-text-cell cell-item">{{ transaction?.old_elect_supplier_name }}</td>
        <td class="md-text-cell cell-item">{{ transaction?.new_elect_supplier_name }}</td>
        <td class="md-text-cell cell-item">{{ transaction?.first_name + ' ' + transaction.last_name }}</td>
        <td class="md-text-cell cell-item">{{ transaction?.switch_type }}</td>

      </tr>
    </tbody>
  </md-data-table>
</md-content>

alguien me podria ayudar???

2
  • 1
    El error no será que estás haciendo this.transaction = localData; en lugar de this.transactions = localData;?
    – devconcept
    Commented el 6 jun. 2016 a las 14:29
  • ¿Ya solucionaste el problema? Commented el 13 abr. 2017 a las 0:48

2 respuestas 2

-1

Me parece que la directiva ngFor sólo acepta arrays y no objetos intenta crear un Pipe convirtiendo el objeto a array o usando:

// returns an Object with two properties
var obj = JSON.parse('{"hello": "world", "data": [ 1, 2, 3 ] }');
console.log(obj.data);

//Deberia mostrarte:

//LOG [1,2,3]

Documentación

1
-2

Tienes que definir una lista del objeto Transaction.

transaction: Transaction[];

Y después inicializar los objetos.

getTransactions() {
  this.transaction = new Transaction(localData);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.