When i click on that particular item data will show according to it from the json file .how can i modify this .. please help :)

Ionic Framework Ionic Angular
1

homeservice.ts
code

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { interfacedata } from './interfacedata';

@Injectable({
  providedIn: 'root'
})

export class HomeService {

  data: any;
  url="./assets/data/data.json";

  constructor(private http:HttpClient) { }

   getHomeData():Observable<interfacedata[]>{
    return this.http.get<interfacedata[]>(this.url);
   }
}

pakistan.html
code

<ion-header >
  <ion-toolbar color="primary">
    <ion-buttons>
      <ion-menu-button slot="start" color="danger"></ion-menu-button>
      <ion-title>Pakistan Team Players</ion-title>
  </ion-buttons>
  <ion-buttons slot="end" routerLink="/menu/cricket"  >
    <ion-icon slot="start" color="danger" name="chevron-back-outline"></ion-icon>
  </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div id="container" >
    <ion-list pager>

      <ion-item  *ngFor="let p of player" routerLink="{{p.link}}">
        <img src="{{p.img}}" />{{p.name}}
      </ion-item>
      </ion-list>
  </div>

</ion-content>

pakistan.ts
code

import { Component, OnInit } from '@angular/core';
import { HomeService } from 'src/app/Services/home.service';

@Component({
  selector: 'app-pakistan',
  templateUrl: './pakistan.page.html',
  styleUrls: ['./pakistan.page.scss'],
})

export class PakistanPage implements OnInit {

  player:any=[];
  constructor(
    private homeservice:HomeService
  ) {}

  ngOnInit() {
    this.homeservice.getHomeData()
    .subscribe((data:any)=>{
      this.player = data.pakistan;
    });
  }
}

baberazam.html
code

<ion-header >
  <ion-toolbar color="primary">
    <ion-buttons>
      <ion-menu-button slot="start" color="danger"></ion-menu-button>
      <ion-title>{{playername}}</ion-title>
  </ion-buttons>
  <ion-buttons slot="end" routerLink="/menu/pakistan"  >
    <ion-icon slot="start" color="danger" name="chevron-back-outline"></ion-icon>
  </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div *ngFor="let d of playername">

   <div class="info">

    <div class="img-box">
  <img src="{{d.img}}">
</div>
<div class="player-details">
  <h2><strong>{{d.name}}</strong></h2>
    <p><b>Born :</b>{{d.born}}</p>
    <p><b>Age :</b>{{d.age}}</p>
    <p><b>Playing Role :</b>{{d.playingrole}}</p>
    <p><b>Batting Style :</b>{{d.battingstyle}}</p>
    <p><b>Bowling Style :</b>{{d.bowlingstyle}}</p>
 

</div>

</div>

<div class="odi">
  <h3><strong>ODI Details</strong></h3>
    <p><b>ODI Debut :</b>{{d.odidebut}}</p>
    <p><b>Matches :</b>{{d.odimatches}}</p>
    <p><b>Innings :</b>{{d.odiinnings}}</p>
    <p><b>Runs :</b>{{d.odiruns}}</p>
    <p><b>Strike Rate :</b>{{d.odistrikerate}}</p>
    <p><b>Best Score :</b>{{d.odihighest}}</p>
    <p><b>Average:</b>{{d.odiaverage}}</p>
    <p><b>Fities :</b>{{d.odififty}}</p>
    <p><b>Hundereds :</b>{{d.odihundered}}</p>
    <p><b>Fours :</b>{{d.odifours}}</p>
    <p><b>Sixes :</b>{{d.odisixes}}</p>
    

  
</div>
<div class="t20">
  <h3><strong>T20 Details</strong></h3>

  <p><b>T20 Debut :</b>{{d.t20debut}}</p>
  <p><b>Matches :</b>{{d.t20matches}}</p>
  <p><b>Innings :</b>{{d.t20innings}}</p>
  <p><b>Runs :</b>{{d.t20runs}}</p>
  <p><b>Strike Rate :</b>{{d.t20strikerate}}</p>
  <p><b>Best Score :</b>{{d.t20highest}}</p>
  <p><b>Average:</b>{{d.t20average}}</p>
  <p><b>Fities :</b>{{d.t20fifty}}</p>
  <p><b>Hundereds :</b>{{d.t20hundered}}</p>
  <p><b>Fours :</b>{{d.t20fours}}</p>
  <p><b>Sixes :</b>{{d.t20sixes}}</p>

</div>
<div class="test">

<h3><strong>Test Details</strong></h3>

<p><b>Test Debut :</b>{{d.testdebut}}</p>
<p><b>Matches :</b>{{d.testmatches}}</p>
<p><b>Innings :</b>{{d.testinnings}}</p>
<p><b>Runs :</b>{{d.testruns}}</p>
<p><b>Strike Rate :</b>{{d.teststrikerate}}</p>
<p><b>Best Score :</b>{{d.testhighest}}</p>
<p><b>Average:</b>{{d.testaverage}}</p>
<p><b>Fities :</b>{{d.testfifty}}</p>
<p><b>Hundereds :</b>{{d.testhundered}}</p>
<p><b>Fours :</b>{{d.testfours}}</p>
<p><b>Sixes :</b>{{d.testsixes}}</p>
</div>
  </div>

</ion-content>

baberazam.ts
code

import { Component, OnInit } from '@angular/core';
import { HomeService } from 'src/app/Services/home.service';

@Component({
  selector: 'app-baberazam',
  templateUrl: './baberazam.page.html',
  styleUrls: ['./baberazam.page.scss'],

})

export class BaberazamPage implements OnInit {
  playername:any=[];
  constructor(
    private homeservice:HomeService
  ) {}

  ngOnInit() {
    this.homeservice.getHomeData()
    .subscribe((data:any)=>{
      this.playername = data.baberAzam;
    });
  }
}