import { Component , OnInit , ViewChild , ElementRef } from '@angular/core' ; import { HttpClient } from '@angular/common/http' ; import { MatTableDataSource , MatPaginator , PageEvent , MatSort , Sort , MatPaginatorIntl } from '@angular/material' ; import { Observable } from 'rxjs/Observable' ; import 'rxjs/add/operator/debounceTime' ; import 'rxjs/add/operator/distinctUntilChanged' ; import 'rxjs/add/observable/fromEvent' ; @ Component ( { selector : 'app-email-list' , templateUrl : './email-list.component.html' , styleUrls : [ './email-list.component.css' ] } ) export class EmailListComponent implements OnInit { @ ViewChild ( 'paginator' ) paginator : MatPaginator ; @ ViewChild ( 'sortTable' ) sortTable : MatSort ; @ ViewChild ( 'filter' ) filter : ElementRef ; currentPage : PageEvent ; currentSort : Sort ; currentFilterData : string ; emailsDataSource = new MatTableDataSource < any > ( ) ; totalCount : number ; constructor ( private httpClient , private matPaginatorIntl ) { } ngOnInit ( ) { this . currentPage = { pageIndex : 0 , pageSize : 10 , length : null } ; this . currentSort = { active : '' , direction : '' } ; this . getIssuees ( ) ; this . paginator . page . subscribe ( ( page ) => { this . currentPage = page ; this . getIssuees ( ) ; } ) ; Observable . fromEvent ( this . filter . nativeElement , 'keyup' ) . debounceTime ( 300 ) . distinctUntilChanged ( ) . subscribe ( ( ) => { this . currentFilterData = ( this . filter . nativeElement as HTMLInputElement ) . value ; this . getIssuees ( ) ; } ) ; this . matPaginatorIntl . getRangeLabel = ( page , pageSize , length ) : string => { if ( length === 0 || pageSize === 0 ) { return `第 0 筆、共 ${ length } 筆` ; } length = Math . max ( length , 0 ) ; const startIndex = page * pageSize ; const endIndex = startIndex < length ? Math . min ( startIndex + pageSize , length ) : startIndex + pageSize ; return `第 ${ startIndex + 1 } - ${ endIndex } 筆、共 ${ length } 筆` ; } ; this . matPaginatorIntl . itemsPerPageLabel = '每頁筆數：' ; this . matPaginatorIntl . nextPageLabel = '下一頁' ; this . matPaginatorIntl . previousPageLabel = '上一頁' ; } changeSort ( sortInfo ) { if ( sortInfo . active === 'created_at' ) { sortInfo . active = 'created' ; } this . currentSort = sortInfo ; this . getIssuees ( ) ; } getIssuees ( ) { const baseUrl = 'https://api.github.com/search/issues?q=repo:angular/material2' ; let targetUrl = `${ baseUrl }&page=${ this . currentPage . pageIndex + 1 }&per_page=${ this . currentPage . pageSize }` ; if ( this . currentSort . direction ) { targetUrl = `${ targetUrl }&sort=${ this . currentSort . active }&order=${ this . currentSort . direction }` ; } if ( this . currentFilterData ) { targetUrl = `${ targetUrl }&q=${ this . currentFilterData }+in:title` ; } this . httpClient . get < any > ( targetUrl ) . subscribe ( data => { this . totalCount = data . total_count ; this . emailsDataSource . data = data . items ; } ) ; } reply ( emailRow ) { console . log ( '回覆信件' , emailRow ) ; } delete ( emailRow ) { console . log ( '刪除信件' , emailRow ) ; } }