ionic4 - 我想显示一首赞美诗的详细信息

Question

Hymn-home代码：

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

赞美诗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);

    }) 
    );

  }
}

赞美诗模型.ts

export class Hymn {
constructor(
    public id: string,
    public numb: number,
    public title: string,
    public details: string
){}
}

和我的 php 文件。

<?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`
?>

我真的需要帮助。在详细信息页面控制台中，它带来了 title、numb、id、details = null。

标签： ionic4