แสดงข้อมูล Service API แบบ Cards และการส่งค่าระหว่าง Page ใน Ionic

[
	{
		"id": "",
		"topic": "",
		"description": "",
		"date": "",
		"img": "",
		"view": ""
	},
	{
		"id": "",
		"topic": "",
		"description": "",
		"date": "",
		"img": "",
		"view": ""
	}
]

<?php  
$mysqli = new mysqli("localhost", "root","","test");  
/* check connection */
if ($mysqli->connect_errno) {  
    printf("Connect failed: %s\n", $mysqli->connect_error);  
    exit();  
}  
if(!$mysqli->set_charset("utf8")) {  
    printf("Error loading character set utf8: %s\n", $mysqli->error);  
    exit();  
}

<?php
header('Access-Control-Allow-Origin: *'); 
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
require_once("dbconnect.php");
$json_data = array();
$more_sql="";	
if(isset($_GET['id']) && $_GET['id']!=""){
	$more_sql=" AND id='".$_GET['id']."' ";	
}
$sql = "
SELECT 
id,topic,description,date,img,view
FROM table WHERE 1 $more_sql ORDER BY id LIMIT 0,10
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[] = array(
			"id" => $row['id'],
			"topic" => $row['topic'],
			"description" => $row['description'],
			"date" => $row['date'],
			"img" => $row['img'],
			"view" => $row['geo_id']                
        );
    }
}
// แปลง array เป็นรูปแบบ json string  
if(isset($json_data)){  
    $json= json_encode($json_data);    
    if(isset($_GET['callback']) && $_GET['callback']!=""){    
    echo $_GET['callback']."(".$json.");";        
    }else{    
    echo $json;    
    }    
}
?>

ionic generate provider article-service

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class ArticleServiceProvider {
  public urlApi:string = "http://localhost/demo/api.php";

  constructor(
    public http: HttpClient
  ) {
  //  console.log('Hello ArticleServiceProvider Provider');
  }

  getArticle(id?:any){
    return this.http.get(this.urlApi,{
      params: {
        id:id!=null?id:''
      }
    });
  }

}

ionic generate page article --no-module

ionic generate page article-detail --no-module

import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';

// import page และ service มาใช้งาน
import { ArticleServiceProvider } from '../../providers/article-service/article-service';
import { ArticleDetailPage } from '../article-detail/article-detail';

// สร้าง interface ของข้อมูลที่จะใช้กับ json data ที่ได้จากไปดึงค่าใน service api
interface articles {
  id: number,
  topic: string,
  description: string,
  date: string,
  img: string,
  view: number
}

@Component({
  selector: 'page-article',
  templateUrl: 'article.html',
})
export class ArticlePage {
  public articleItems: articles; // สร้างตัวแปรสำหรับเก็บข้อมูล

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public articleService: ArticleServiceProvider, // มีการใช้งาน provider service
    public loadingCtrl: LoadingController // มีการใช้งาน loading component
  ) { }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ArticlePage');

	// กำหนดรูปแบบของ loading ดูการปรับแต่งเพิ่มเติมได้ที่
	// https://ionicframework.com/docs/api/components/loading/LoadingController/
    let loading = this.loadingCtrl.create({
      content: 'Loading ...'
    }); 
    loading.present(); // แสดง loading

	// เรียกใช้งาน service
    this.articleService.getArticle()
      .subscribe((res: articles) => {
        console.log(res);       
        this.articleItems = res;
        loading.dismiss(); // ปิด loading เมื่อดึงข้อมูลและกำหนดค่าให้ตัวแปรเรียบร้อยแล้ว      
      });
  }

  // ฟังก์ชั่นสำหรับเปิด page ใหม่ โดยมีการส่งค่า ไปใช้งาน
  openArticle(id: any) {
    this.navCtrl.push(ArticleDetailPage, {
      id: id
    });
  }

}

<ion-header>
  <ion-navbar color="primary">
      <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>    
    <ion-title>Article</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content>

  <ion-card (click)="openArticle(article.id)" *ngFor="let article of articleItems">

    <ion-item>
      <h2>{{article.topic}}</h2>
      <ion-note>{{ article.date }}</ion-note>
    </ion-item>
  
    <img src="{{article.img}}"> 
    <ion-card-content>
      {{article.description}}
    </ion-card-content>
  
    <ion-row>
      <ion-col>
        <button ion-button icon-left clear small>
          <ion-icon name="eye"></ion-icon>
          <div>{{article.view}} Views</div>
        </button>
      </ion-col>
      <ion-col>
        <button ion-button icon-left clear small>
          <ion-icon name="share"></ion-icon>
          <div>Share</div>
        </button>
      </ion-col>
    </ion-row>
  
  </ion-card>

</ion-content>

import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';

import { ArticleServiceProvider } from '../../providers/article-service/article-service';

interface articles{
  id:number,
  topic:string,
  description:string,
  date:string,
  img:string,
  view:number
}

@Component({
  selector: 'page-article-detail',
  templateUrl: 'article-detail.html',
})
export class ArticleDetailPage {
  public article:articles;
  
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public articleService:ArticleServiceProvider,
    public loadingCtrl: LoadingController 
  ){  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ArticleDetailPage');

	// ส่วนของการกำหนด loading
    let loading = this.loadingCtrl.create({
      content: 'Loading ...'
    }); 
    loading.present(); // แสดง loading

	// ส่วนของการดึงค่า params ที่ส่งมาจากหน้าหลักมาใช้งาน
    let id = this.navParams.get("id");
	
	// เรียกใช้งาน provider service คราวนี้ส่ง id ของข้อมูลที่ต้องการแสดง
    this.articleService.getArticle(id)
    .subscribe((res:articles) =>{
      console.log(res); 
      this.article = res[0]; // เนื่องจากเป็นข้อมูลเดียว เราจึงอ้างอิงที่ array key = 0 ที่เป็นค่าแรก
      loading.dismiss(); // ปิด loading
    });    
  }

}

<ion-header>
  <ion-navbar color="dark">
      <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>    
    <ion-title>Article Detail</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content>

  <ion-card *ngIf="article">

    <ion-item>
      <h2>{{article.topic}}</h2>
      <ion-note>{{ article.date }}</ion-note>
    </ion-item>
  
    <img src="{{article.img}}"> 
    <ion-card-content>
      {{article.description}}
    </ion-card-content>
  
    <ion-row>
      <ion-col>
        <button ion-button icon-left clear small>
          <ion-icon name="eye"></ion-icon>
          <div>{{article.view}} Views</div>
        </button>
      </ion-col>
      <ion-col>
        <button ion-button icon-left clear small>
          <ion-icon name="share"></ion-icon>
          <div>Share</div>
        </button>
      </ion-col>
    </ion-row>
  
  </ion-card>

</ion-content>