I want to display a single hymn song details - ionic4

Question

Hymn-home code:
<ion-header>
<ion-toolbar>
<ion-title>
<ion-buttons>
<img src="./assets/icon/logo.png" id="logo2">
Enyimba Z'Omutukirivu
</ion-buttons>
</ion-title>
<ion-buttons slot="end">
<ion-button href="/searh-hymn">
<ion-icon name="search" slot="icon-only">
</ion-icon></ion-button>
<ion-button><ion-icon name="ellipsis-vertical-outline" slot="icon-only"></ion-icon></ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-virtual-scroll [items]= "hymn">
<ion-item
*virtualItem="let song"
button
detail
[routerLink]="['/', 'hymn-detail', song.id]"
>
<ion-label>{{ song.title }}</ion-label>
</ion-item>
</ion-virtual-scroll>
</ion-content>
hymn-home.ts code
import { Component, OnInit } from '#angular/core';
import { HymnServiceService } from '../hymn-service.service';
import { NavController } from '#ionic/angular';
import { Router } from '#angular/router';
import { Hymn } from '../hymn.model';
import { Subscription } from 'rxjs';
#Component({
selector: 'app-hymn-home',
templateUrl: './hymn-home.page.html',
styleUrls: ['./hymn-home.page.scss']
})
export class HymnHomePage implements OnInit {
hymn: Hymn[];
public hymnsub: Subscription;
constructor(public HymnService: HymnServiceService,
private router: Router,
public navCtrl: NavController) { }
ngOnInit() {
}
ionViewWillEnter() {
this.HymnService.fetchHymns().subscribe(data => {
console.dir(data)
this.hymn = data;
});
}
}
hymn-detail html code
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/hymn-home" icon="chevron-back-outline"></ion-back-button>
</ion-buttons>
<ion-buttons>
<img src="./assets/icon/logo.png" id="logo2">
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col size="12" size-sm="8" offset-sm="2">
<ion-item>{{ hymn?.title }}</ion-item>
<ion-item>
{{ hymn?.details }}
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Hymn detail.ts
import { Component, OnInit } from '#angular/core';
import { HymnServiceService } from '../hymn-service.service';
import { Router, ActivatedRoute } from '#angular/router';
import { Hymn } from '../hymn.model';
import { Subscription } from 'rxjs';
import { NavController } from '#ionic/angular';
#Component({
selector: 'app-hymn-detail',
templateUrl: './hymn-detail.page.html',
styleUrls: ['./hymn-detail.page.scss'],
})
export class HymnDetailPage implements OnInit {
hymn : Hymn;
hymnId: string;
public hymnsub: Subscription;
constructor(public hymnService: HymnServiceService,
private actroute: ActivatedRoute, private router: Router,
private navCtrl: NavController) { }
ngOnInit() {
this.actroute.paramMap.subscribe(paramMap => {
this.hymnId = paramMap.get('hymnId');
this.hymnsub = this.hymnService
.readHymn(paramMap.get('hymnId')).subscribe(hymn => {
console.log(hymn);
this.hymn = hymn;
})
});
}
}
hymnservice.ts
import { Injectable } from '#angular/core';
import { map, tap, take } from 'rxjs/operators';
import { HttpClient } from '#angular/common/http';
import { BehaviorSubject } from 'rxjs';
import { Hymn } from './hymn.model';
interface hymnData{
id: string;
numb: number;
title: string;
details: string;
}
#Injectable({
providedIn: 'root'
})
export class HymnServiceService {
private _hymns = new BehaviorSubject<Hymn[]>([]);
constructor(public http: HttpClient) { }
fetchHymns() {
let url = "http://localhost/MyApp/php/read.php";
let request = this.http.get<{[key: string] : hymnData}>(url);
return request.pipe(map(resData => {
const hymns = [];
for (const key in resData) {
if (resData.hasOwnProperty(key)) {
hymns.push (
new Hymn(resData[key].id, resData[key].numb,
resData[key].title, resData[key].details)
)
}
}
return hymns;
}),
tap(hymns => {
this._hymns.next(hymns);
}));
}
readHymn(id: string) {
let url = "http://localhost/MyApp/php/read.php";
let request = this.http.get<hymnData>(url);
return request.pipe(map(hymnData => {
return new Hymn(id, hymnData.numb, hymnData.title, hymnData.details);
})
);
}
}
hymn model.ts
export class Hymn {
constructor(
public id: string,
public numb: number,
public title: string,
public details: string
){}
}
and my php file.
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-with');
header('Content-Type: application/json; charset=utf-8');
define('DB_NAME', 'hymnsdb');
define('DB_USER', 'root');
define('DB_PASSWORD', '');
define('DB_HOST', 'localhost');
$conn = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
if($conn->connect_error) {
die("Connection failed " . $conn->connect_error);
}
$query = "SELECT * FROM `songs` ";
$result = mysqli_query($conn, $query);
$data = array();
while ($row=mysqli_fetch_object($result)) {
//$output = array();
//$output = $result->fetch_all(MYSQLI_ASSOC);
//echo json_encode($output);
$data[] = $row;
}
echo json_encode($data);
echo mysqli_error($conn);
//else {
//echo json_encode("No Hymns");
//}
$conn->close();`enter code here`
?>
I really need help. In details page console it brings title, numb,id, details = null.