Browser does not show me anything (Angular 2 App)

Navigation
0

I am trying to show the objects from which I move from localStorage to the component controller. However, when he passes them, he does not show me anything in the view.

This would be the component. 

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);
  }

When I do the console.log it shows me the array of objects that I have perfectly. But at the time of showing it in the view it does not show them

This would be the view: 

<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>

could someone help me ???

    
asked by AgusZeroUK 06.06.2016 в 15:51
source

2 answers

-1

It seems to me that the ngFor directive only accepts arrays and not objects tries to create a Pipe by converting the object to array or using: 

// 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]

Documentation

    
answered by 01.09.2016 в 18:35
-2

You have to define a list of the Transaction object. 

transaction: Transaction[];

And then initialize the objects. 

getTransactions() {
  this.transaction = new Transaction(localData);
}
    
answered by 22.03.2017 в 15:56
Help about an MVC playframework error. I am using Java, Scala, HTML Javascript php enable table row