Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 230097

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

$
0
0

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

Provider: contactos-api.ts

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

@Injectable()
export class ContactosApiProvider {

  constructor(private http: Http) {
  }

  getData(){
    return this.http.get('https://randomuser.me/api/?results=10')
    .map((data: Response) => data.json());
  }
}

home.ts

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  myUser = [];

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

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">
    <p>{{theUser.name.last}}</p>
  </button>

</ion-list>

</ion-content>

Viewing all articles
Browse latest Browse all 230097

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>