Unable to print both ion-list and ion-item


#1

Unable to print both ion-list and ion-item.
Either of the one is possible but not both.
I want the email id to be after the country

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list *ngFor="let countries of country">
        <p>{{countries.id}}</p>
             <h4>{{countries['country_name']}}</h4>
             
             
   </ion-list>
 <ion-item *ngFor="let user of random">
      
                   <h4 >{{user.email}}</h4></ion-item>
   
  </ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  private apiurl = 'http://34.215.46.34/api.php?q=';
  private baseurl = 'https://randomuser.me/api/?results=250';
  country:any[]=[];
  data: Object[] = [];
  random:any;
  randomdata1:any;

  constructor(public navCtrl: NavController, private http: Http) {
    console.log("Countries api");
    console.log("Random api");
    this.getcountry();
    this.getdata();
    this.getrandom();
    this.getrandomdata();
    
  }
  getrandomdata(){
      return this.http.get(this.baseurl)
      .map(res => res.json())
      }
  getrandom(){
    this.getrandomdata().subscribe(randomdata1 =>{
      console.log(randomdata1);
      this.random=randomdata1['results']
    })
  }
  
  getdata(){
    return this.http.get(this.apiurl)
    .map(res => res.json())
  }
  getcountry(){
    this.getdata().subscribe(res =>{
      console.log(res);
      this.country=res.result;
    })

  }

}