[Ionic 3] Empty List with *ngFor and pipe (present data from object)

@marcooliva wrote:

Hello,

I am trying to list with *ngFor and a pipe data from an object but it’s not working.

I am trying to do this:

but i am presented with:

image.png1366x768 5.08 KB

Can anyone help me, please?

Thanks!

Template - home.html

<ion-header>
  <ion-navbar>
    <ion-title text-center>
      Contactos
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

<ion-list>

  <button ion-item *ngFor="let theUser of myUser | keys">

    <ion-avatar item-start>
      <img src="{{theUser?.picture}}"/>
    </ion-avatar>

    <h2>{{theUser?.login}}</h2>

    <p>{{theUser?.name}}</p>

  </button>

</ion-list>

</ion-content>

Module - home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';
import { ContactosApiProvider, User } from '../../providers/contactos-api/contactos-api';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  name: Observable<any>;
  myUser: User;

  constructor(public navCtrl: NavController, public contactosApiProvider: ContactosApiProvider) {
      contactosApiProvider.getData().subscribe(newUser => {
        this.myUser = newUser;
      });
    }
}

Pipe - keys.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
	name: 'keys',
})
export class KeysPipe implements PipeTransform {

	transform(value: any, args?: any[]): any[] {

		if(value) {

			let keyArr: any[] = Object.keys(value),
			dataArr = [];

			keyArr.forEach((key: any) => {
				dataArr.push(key);
			});

			return dataArr;
		}
	}
}

Provider - contactos-api.ts

import { Http, Response } from "@angular/http";
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Observable } from "rxjs";

export class User{
  name: String;
  location: String;
  email: String;
  login: String;
  dob: String;
  registered: String;
  phone: String;
  cell: String;
  picture: String;
  nat: String;

  constructor(name, location, email, login, dob, registered, phone, cell, picture, nat){
    this.name = name;
    this.location = location;
    this.email = email;
    this.login = login;
    this.dob = dob;
    this.registered = registered;
    this.phone = phone;
    this.cell = cell;
    this.picture = picture;
    this.nat = nat;
  }

}


@Injectable()
export class ContactosApiProvider {

  constructor(private http: Http) {
  }

  getData(){
    return this.http.get('https://randomuser.me/api')
    .map((data: Response) => data.json())
    .map(res => {
      return new User(res['results'][0].name.first,
      res['results'][0].location.street,
      res['results'][0].email,
      res['results'][0].login.username,
      res['results'][0].dob,
      res['results'][0].registered,
      res['results'][0].phone,
      res['results'][0].cell,
      res['results'][0].picture.thumbnail,
      res['results'][0].nat);
    });
  }

}

App - app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpModule } from '@angular/http';


import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DetalhesPage } from '../pages/detalhes/detalhes';
import { ContactosApiProvider } from '../providers/contactos-api/contactos-api';
import { KeysPipe } from '../pipes/keys/keys';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    DetalhesPage,
    KeysPipe
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    DetalhesPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ContactosApiProvider
  ]
})
export class AppModule {}

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.0
Angular Core: 5.0.0
Angular Compiler CLI: 5.0.0
Node: 6.12.0

Posts: 1

Participants: 1

Read full topic