ดึงข้อมูล แสดงรายการพร้อมแบ่งหน้า ด้วย HttpClient ใน Angular ตอนที่ 2

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css');

<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <a class="navbar-brand" [routerLink]="['/home']">Angular</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" [routerLink]="['/home']">Home <span class="sr-only">
            (current)
          </span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link"  [routerLink]="['/article']">Article</a>
        </li>
      </ul>
    </div>
  </nav>
  
  <div class="container">
    <router-outlet></router-outlet>
  </div>

C:\projects\httpclient>ng g c home

C:\projects\httpclient>ng g module article --routing

C:\projects\httpclient>ng g c article/article --flat

C:\projects\httpclient>ng g c article/article-list --flat

C:\projects\httpclient>ng g c article/article-detail --flat

C:\projects\httpclient>ng g c pagenofound

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ArticleComponent } from './article.component';
import { ArticleListComponent } from './article-list.component';
import { ArticleDetailComponent } from './article-detail.component';

const articleRoutes: Routes = [
  {
    path:'article',
    component:ArticleComponent,
    children:[
      {
        path:'',
        component:ArticleListComponent
      },
      {
        path:':id',
        component:ArticleDetailComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(articleRoutes)],
  exports: [RouterModule]
})
export class ArticleRoutingModule { }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
 
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
import { HomeComponent } from './home/home.component';
 
const appRoutes: Routes = [
    {
        path:'home',
        component:HomeComponent
    },
    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    },
    { path: '**', component: PagenofoundComponent }
];
 
@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false } // <-- debugging purposes only set true
    )
  ], 
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { ArticleModule } from './article/article.module';

import { AppComponent } from './app.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    PagenofoundComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ArticleModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<p>  article works!</p>
<router-outlet></router-outlet>

<p> article-list works! </p>
<table class="table table-sm">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td><a class="text-secondary">test 1</a></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td><a class="text-secondary">test 2</a></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td><a class="text-secondary">test 3</a></td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td><a class="text-secondary">test 4</a></td>
    </tr>
    <tr>
      <th scope="row">5</th>
      <td><a class="text-secondary">test 5</a></td>
    </tr>
  </tbody>
</table>
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"> <a class="page-link"> First</a> </li>
    <li class="page-item disabled"> <a class="page-link"> Previous</a> </li>
    <li class="page-item active"><a class="page-link">1</a></li>
    <li class="page-item"><a class="page-link">2</a></li>
    <li class="page-item"><a class="page-link">3</a></li>
    <li class="page-item"><a class="page-link">4</a></li>
    <li class="page-item"><a class="page-link">5</a></li>
    <li class="page-item"> <a class="page-link" > Next</a> </li>
    <li class="page-item">
      <input type="number"class="form-control" min="1" max="5" 
          style="width:80px;"  value="1" />
    </li>
    <li class="page-item"> <a class="page-link"> Last</a> </li>
  </ul>
</nav>

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
    	<a class="page-link" [routerLink]="['/article']"  [queryParams]="{page: 1}"> First</a>
    </li>
    <li class="page-item" [class.disabled]="activePage==1">
    	<a class="page-link" [routerLink]="['/article']"  [queryParams]="{page: prevPage}"> Previous</a> 
    </li>
    <li class="page-item" *ngFor="let i of iPage" [class.active]="activePage==i"> 
    	<a class="page-link" [routerLink]="['/article']"  [queryParams]="{page: i}"> {{ i }} </a> 
    </li>
    <li class="page-item" [class.disabled]="activePage==totalPage"> 
        <a class="page-link" [routerLink]="['/article']"  
                [queryParams]="{page: nextPage}"> Next</a>
	</li>
    <li class="page-item">
      <input #pageInput type="number"class="form-control" min="1" max="{{ totalPage }}" 
              style="width:80px;" (input)="changePage(pageInput.value)" value="{{ activePage }}" />
    </li>
    <li class="page-item"> 
    	<a class="page-link" [routerLink]="['/article']"  [queryParams]="{page: totalPage}"> Last</a> 
    </li>
  </ul>
</nav>

• totalPage คือ จำนวนหน้าทั้งหมด
• activePage คือ เลขหน้าปัจจุบัน
• nextPage คือ เลขหน้าถัดไป
• prevPage คือ เลขหน้าก่อนหน้า
• iPage คือ ตัวแปร array เลขหน้า เช่น [1,2,3,4,5] เอาไว้สร้างเลขหน้า
• changePage() คือ ฟังก์ชั่นหรือคำสั่งสำหรับการเปลี่ยนหน้า page

[queryParams]="{page: 1}"

[class.disabled]="activePage==1"

[class.active]="activePage==i"

(input)="changePage(pageInput.value)"

<input #pageInput type="number"class="form-control" min="1" max="{{ totalPage }}" 
              style="width:80px;" (input)="changePage(pageInput.value)" value="{{ activePage }}" /> 

*ngFor="let i of iPage"

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { HttpClient, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Component({
  //selector: 'app-article-list',
  templateUrl: './article-list.component.html',
  styleUrls: ['./article-list.component.css']
})
export class ArticleListComponent implements OnInit {

  // ส่วนจัดการเกี่ยวกับการแบ่งหน้า variable
  public iPage:number[] = [];
  public iPageStart:number = 1;
  public prevPage:number;
  public nextPage:number;
  public activePage:number;
  public totalItem:number = 100; // สมมติจำนวนรายการทั้งหมดเริ่มต้น หรือเป็น 0 ก็ได้
  public perPage:number = 10; // จำนวนรายการที่แสดงต่อหน้า
  public totalPage:number;
  public maxShowPage:number;
  public useShowPage:number = 5; // จำนวนปุ่มที่แสดง ใช้แค่ 5 ปุ่มตัวเลข
  public pointStart:number = 0; // ค่าส่วนนี้ใช้การกำหนดการแสดงข้อมูล
  public pointEnd:number; // ค่าส่วนนี้ใช้การกำหนดการแสดงข้อมูล

  constructor(
    private http:HttpClient,
    private route: ActivatedRoute,
    private router:Router
  ) { }  

  // ส่วนจัดการเกี่ยวกับการแบ่งหน้า
  changePage(page:number){
    this.activePage = page;
    this.router.navigate(['/article'], {queryParams:{page:page}});
  }

  pagination(){
    if(this.activePage > this.useShowPage){
      if(this.activePage+2 <= this.totalPage){
        this.iPageStart = this.activePage-2;
        this.maxShowPage = this.activePage+2;
      }else{
        if(this.activePage <= this.totalPage){
          this.iPageStart = (this.totalPage+1)-this.useShowPage;
          this.maxShowPage = (this.iPageStart-1)+this.useShowPage;
        }
      }
      this.iPage = [];
      for(let i=this.iPageStart;i<=this.maxShowPage;i++){
        this.iPage.push(i);
      }            
    }else{
      this.iPageStart = 1;
      this.iPage = [];
      for(let i=this.iPageStart;i<=this.useShowPage;i++){
        this.iPage.push(i);
      }              
    }   
    
  }
  // ส่วนจัดการเกี่ยวกับการแบ่งหน้า

  ngOnInit() {

    // ส่วนจัดการเกี่ยวกับการแบ่งหน้า
    this.activePage = 1;
    this.nextPage = 2;
    this.pointEnd = this.perPage*this.activePage;

    this.totalPage = Math.ceil(this.totalItem/this.perPage);
    if(this.totalPage>this.useShowPage){
      this.useShowPage = 5;
    }else{
      this.useShowPage = this.totalPage;
    }

    for(let i=this.iPageStart;i<=this.useShowPage;i++){
      this.iPage.push(i);
    }

    this.route
    .queryParams
    .subscribe((data: { page: any }) => {
      if(data!=null && data.page!=null){
        this.activePage = +data.page;   
        this.prevPage = this.activePage-1;
        this.nextPage = this.activePage+1;   
        this.pointStart = (this.activePage-1)*this.perPage;
        this.pointEnd = this.perPage*this.activePage;
        this.pagination();
      }
    });    
    // ส่วนจัดการเกี่ยวกับการแบ่งหน้า

  }

}

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { HttpClient, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

// กำหนด interface ให้สอดคล้องกับข้อมูลที่ส่งมา
interface Articles{
  'userId':number,
  'id':number,
  'title':string,
  'body':string  
}

@Component({
  //selector: 'app-article-list',
  templateUrl: './article-list.component.html',
  styleUrls: ['./article-list.component.css']
})
export class ArticleListComponent implements OnInit {
  // ส่วนของตัวแปรไว้รับค่าข้อมูลที่ไปดึงมา
  public results:any;// กำหนดตัวแปร เพื่อรับค่า
  public urlSource:string = "https://jsonplaceholder.typicode.com";
  public highlightId:number; // สำหรับเก็บ id ที่เพิ่งเข้าดู

  // ส่วนจัดการเกี่ยวกับการแบ่งหน้า variable
  public iPage:number[] = [];
  public iPageStart:number = 1;
  public prevPage:number;
  public nextPage:number;
  public activePage:number;
  public totalItem:number = 100; // สมมติจำนวนรายการทั้งหมดเริ่มต้น หรือเป็น 0 ก็ได้
  public perPage:number = 10; // จำนวนรายการที่แสดงต่อหน้า
  public totalPage:number;
  public maxShowPage:number;
  public useShowPage:number = 5; // จำนวนปุ่มที่แสดง ใช้แค่ 5 ปุ่มตัวเลข
  public pointStart:number = 0; // ค่าส่วนนี้ใช้การกำหนดการแสดงข้อมูล
  public pointEnd:number; // ค่าส่วนนี้ใช้การกำหนดการแสดงข้อมูล

  constructor(
    private http:HttpClient,
    private route: ActivatedRoute,
    private router:Router
  ) { }  

  // ส่วนจัดการเกี่ยวกับการแบ่งหน้า
  changePage(page:number){
    this.activePage = page;
    this.router.navigate(['/article'], {queryParams:{page:page}});
  }

  pagination(){
    if(this.activePage > this.useShowPage){
      if(this.activePage+2 <= this.totalPage){
        this.iPageStart = this.activePage-2;
        this.maxShowPage = this.activePage+2;
      }else{
        if(this.activePage <= this.totalPage){
          this.iPageStart = (this.totalPage+1)-this.useShowPage;
          this.maxShowPage = (this.iPageStart-1)+this.useShowPage;
        }
      }
      this.iPage = [];
      for(let i=this.iPageStart;i<=this.maxShowPage;i++){
        this.iPage.push(i);
      }            
    }else{
      this.iPageStart = 1;
      this.iPage = [];
      for(let i=this.iPageStart;i<=this.useShowPage;i++){
        this.iPage.push(i);
      }              
    }   
    
  }
  // ส่วนจัดการเกี่ยวกับการแบ่งหน้า

  ngOnInit() {

    // ส่วนจัดการเกี่ยวกับการแบ่งหน้า
    this.activePage = 1;
    this.nextPage = 2;
    this.pointEnd = this.perPage*this.activePage;

    this.totalPage = Math.ceil(this.totalItem/this.perPage);
    if(this.totalPage>this.useShowPage){
      this.useShowPage = 5;
    }else{
      this.useShowPage = this.totalPage;
    }

    for(let i=this.iPageStart;i<=this.useShowPage;i++){
      this.iPage.push(i);
    }

    this.route
    .queryParams
    .subscribe((data: { page: any }) => {
      if(data!=null && data.page!=null){
        this.activePage = +data.page;   
        this.prevPage = this.activePage-1;
        this.nextPage = this.activePage+1;   
        this.pointStart = (this.activePage-1)*this.perPage;
        this.pointEnd = this.perPage*this.activePage;
        this.pagination();
      }
    });    
    // ส่วนจัดการเกี่ยวกับการแบ่งหน้า

    // ส่วนของการดึงข้อมูลด้วย HttpClient get() method
    this.http.get<Articles[]>(this.urlSource+'/posts')
    .subscribe(
      data => {
        // กรณี resuponse success
        // เก็บจำนวนรายการทั้งหมด ไปคำนวณหน้าจำนวนหน้า
        this.totalItem = data.length; 
        this.results = data;
      },
      ( err:HttpErrorResponse ) => {
        // กรณี error
        if (err.error instanceof Error) {
          // กรณี error ฝั่งผู้ใช้งาน หรือ การเชื่อมต่อเกิด error ขึ้น
          console.log('An error occurred:', err.error.message);
        }else{ // กรณี error ฝั่ง server ไม่พบไฟล์ ,server error 
          console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
        }       
      }
    );    
    
    // ส่วนของการรับค่า paramMap ที่ส่งกลับมาจากหน้า รายละเอียด
    let params = this.route.snapshot.paramMap;
    if(params.has('id')){
      // เก็บ id รายการที่เพิ่งเข้าไปดู ใส่เครื่องหมาย + ด้านหน้าเพื่อทำให็ 
      // string แปลงเป็นตัวแปร number
      this.highlightId = +params.get('id');
    }    


  }

}

{
	"userId": 1,
	"id": 1,
	"title": "text",
	"body": "text"
}

// กำหนด interface ให้สอดคล้องกับข้อมูลที่ส่งมา
interface Articles{
  'userId':number,
  'id':number,
  'title':string,
  'body':string  
}

// ส่วนของตัวแปรไว้รับค่าข้อมูลที่ไปดึงมา
public results:any;// กำหนดตัวแปร เพื่อรับค่า
public urlSource:string = "https://jsonplaceholder.typicode.com";
public highlightId:number; // สำหรับเก็บ id ที่เพิ่งเข้าดู

this.totalItem = data.length; 

<p>article-list works!</p>
<table class="table table-sm">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Title</th>
      </tr>
    </thead>
    <tbody>
      <tr [class.table-info]="highlightId == result.id"
       *ngFor="let result of results | slice:pointStart:pointEnd;let i=index">
        <th scope="row">{{ ((activePage-1)*perPage) + (i+1) }}</th>
        <td>
          <a class="text-secondary" [routerLink]="['/article',result.id]"
          [queryParams]="{page: activePage}" >  
          {{ result.title }}
          </a>
        </td>
      </tr>
    </tbody>
  </table> 
  <nav aria-label="Page navigation">
      <ul class="pagination">
        <li class="page-item">
          <a class="page-link" [routerLink]="['/article']"  [queryParams]="{page: 1}"> First</a>
        </li>
        <li class="page-item" [class.disabled]="activePage==1">
          <a class="page-link" [routerLink]="['/article']"  [queryParams]="{page: prevPage}"> Previous</a> 
        </li>
        <li class="page-item" *ngFor="let i of iPage" [class.active]="activePage==i"> 
          <a class="page-link" [routerLink]="['/article']"  [queryParams]="{page: i}"> {{ i }} </a> 
        </li>
        <li class="page-item" [class.disabled]="activePage==totalPage"> 
            <a class="page-link" [routerLink]="['/article']"  
                    [queryParams]="{page: nextPage}"> Next</a>
      </li>
        <li class="page-item">
          <input #pageInput type="number"class="form-control" min="1" max="{{ totalPage }}" 
                  style="width:80px;" (input)="changePage(pageInput.value)" value="{{ activePage }}" />
        </li>
        <li class="page-item"> 
          <a class="page-link" [routerLink]="['/article']"  [queryParams]="{page: totalPage}"> Last</a> 
        </li>
      </ul>
    </nav>

[class.table-info]="highlightId == result.id"

{
    "page": 2,
    "per_page": 3,
    "total": 12,
    "total_pages": 4,
    "data": [
        {
            "id": 4,
            "first_name": "Eve",
            "last_name": "Holt",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
        },
        {
            "id": 5,
            "first_name": "Charles",
            "last_name": "Morris",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
        },
        {
            "id": 6,
            "first_name": "Tracey",
            "last_name": "Ramos",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
        }
    ]
}

<p>article-detail works!</p>
<table class="table table-sm">
  <thead class="thead-dark">
    <tr>
      <th scope="col" colspan="2">View Detail</th>
    </tr>
  </thead>
  <tbody *ngFor="let result of results">
    <tr>
      <th class="table-secondary text-right" width="100" scope="row">userId &nbsp;</th>
      <td> {{ result.userId }} </td>
    </tr>
    <tr>
      <th class="table-secondary text-right" scope="row">ID &nbsp;</th>
      <td> {{ result.id }} </td>
    </tr>
    <tr>
      <th class="table-secondary text-right" scope="row">Title &nbsp;</th>
      <td> {{ result.title }} </td>
    </tr>
    <tr>
      <th class="table-secondary text-right" scope="row">Detail &nbsp;</th>
      <td> {{ result.body }} </td>
    </tr>
  </tbody>
</table>
<button [routerLink]="['/article',{id:postID}]" 
[queryParams]="{page: activePage}" class="btn btn-sm btn-warning"> Back</button>

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { HttpClient, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

// กำหนด interface ให้สอดคล้องกับข้อมูลที่ส่งมา
interface Articles{
  'userId':number,
  'id':number,
  'title':string,
  'body':string  
}

@Component({
  // selector: 'app-article-detail',
  templateUrl: './article-detail.component.html',
  styleUrls: ['./article-detail.component.css']
})
export class ArticleDetailComponent implements OnInit {
  public results:any;
  public urlSource:string = "https://jsonplaceholder.typicode.com";
  public postID:number;
  public activePage:number;

  constructor(
    private http:HttpClient,
    private route: ActivatedRoute,
    private router: Router       
  ) { }

  ngOnInit() {

    let params = this.route.snapshot.paramMap;
    if(params.has('id')){
      this.postID = +params.get('id');
    }
    this.route
    .queryParams
    .subscribe((data: { page: any }) => {
      if(data!=null && data.page!=null){
        this.activePage = +data.page;   
      }
    });   
    
    // ส่วนของการดึงข้อมูลด้วย HttpClient get() method
    this.http.get<Articles[]>(this.urlSource+'/posts')
    .subscribe(
      data => {
        // กรณี resuponse success
        this.results = data.filter( article => {
          return article.id == this.postID;
        });
      },
      ( err:HttpErrorResponse ) => {
        // กรณี error
        if (err.error instanceof Error) {
          // กรณี error ฝั่งผู้ใช้งาน หรือ การเชื่อมต่อเกิด error ขึ้น
          console.log('An error occurred:', err.error.message);
        }else{ // กรณี error ฝั่ง server ไม่พบไฟล์ ,server error 
          console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
        }       
      }
    );        

  }

}

http://localhost:4200/article/32?page=4

http://localhost:4200/article;id=32?page=4

http://localhost:4200/article;id=33;more=test?page=4