skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(table): add missing imports and improve example using http (#5956)

Browse Source 
* fix: add missing OnInit

* refactor: simplify example

* fix: export interfaces and remove unused import

* address comments

* correct nested path
This commit is contained in:
Rafael Santana
2017-07-28 12:01:21 -03:00
committed by Andrew Seguin
parent c9d67c08de
commit aea8df4791
2 changed files with 64 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/material-examples/table-http/table-http-example.html
+16 -11
View File
@@ -8,39 +8,44 @@
</div>
<md-table #table [dataSource]="dataSource" class="example-table"
mdSort mdSortActive="created" mdSortDisableClear mdSortDirection="asc">
mdSort mdSortActive="created_at" mdSortDisableClear mdSortDirection="asc">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Number Column -->
<ng-container cdkColumnDef="number">
<md-header-cell *cdkHeaderCellDef> Number </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.number}} </md-cell>
<md-header-cell *cdkHeaderCellDef>#</md-header-cell>
<md-cell *cdkCellDef="let row">{{ row.number }}</md-cell>
</ng-container>
<!-- Title Column -->
<ng-container cdkColumnDef="title">
<md-header-cell *cdkHeaderCellDef> Title </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.title}} </md-cell>
<md-header-cell *cdkHeaderCellDef>Title</md-header-cell>
<md-cell *cdkCellDef="let row">{{ row.title }}</md-cell>
</ng-container>
<!-- State Column -->
<ng-container cdkColumnDef="state">
<md-header-cell *cdkHeaderCellDef> State </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.state}} </md-cell>
<md-header-cell *cdkHeaderCellDef>State</md-header-cell>
<md-cell *cdkCellDef="let row">{{ row.state }}</md-cell>
</ng-container>
<!-- Created Column -->
<ng-container cdkColumnDef="created">
<md-header-cell *cdkHeaderCellDef md-sort-header disableClear="true"> Created </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.created.toDateString()}} </md-cell>
<ng-container cdkColumnDef="created_at">
<md-header-cell *cdkHeaderCellDef
md-sort-header
disableClear="true">
Created
</md-header-cell>
<md-cell *cdkCellDef="let row">{{ row.created_at | date }}</md-cell>
</ng-container>
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
</md-table>
<md-paginator [length]="dataSource.resultsLength"
[pageSize]="30">
</md-paginator>
</div>
</div>
src/material-examples/table-http/table-http-example.ts
+48 -63
View File
@@ -1,56 +1,60 @@
import {Component, ViewChild} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Component, OnInit, ViewChild} from '@angular/core';
import {Http} from '@angular/http';
import {DataSource} from '@angular/cdk/table';
import {MdPaginator, MdSort} from '@angular/material';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/switchMap';
@Component({
selector: 'table-http-example',
styleUrls: ['table-http-example.css'],
templateUrl: 'table-http-example.html',
})
export class TableHttpExample {
displayedColumns = ['created', 'state', 'number', 'title'];
export class TableHttpExample implements OnInit {
displayedColumns = ['created_at', 'state', 'number', 'title'];
exampleDatabase: ExampleHttpDao | null;
dataSource: ExampleDataSource | null;
@ViewChild(MdPaginator) paginator: MdPaginator;
@ViewChild(MdSort) sort: MdSort;
constructor(http: Http) {
this.exampleDatabase = new ExampleHttpDao(http);
}
constructor(private http: Http) {}
ngOnInit() {
this.dataSource = new ExampleDataSource(this.exampleDatabase!,
this.sort, this.paginator);
this.exampleDatabase = new ExampleHttpDao(this.http);
this.dataSource = new ExampleDataSource(
this.exampleDatabase!, this.paginator, this.sort);
}
}
export interface GithubApi {
items: GithubIssue[];
total_count: number;
}
export interface GithubIssue {
created_at: string;
number: string;
state: string;
title: string;
created: Date;
}
/** An example database that the data source uses to retrieve data for the table. */
export class ExampleHttpDao {
constructor(private http: Http) {}
getRepoIssues(sort: string, order: string, page: number): Observable<Response> {
getRepoIssues(sort: string, order: string, page: number): Observable<GithubApi> {
const href = 'https://api.github.com/search/issues';
const requestUrl =
`${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`;
return this.http.get(requestUrl);
`${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`;
return this.http.get(requestUrl)
.map(response => response.json() as GithubApi);
}
}
@@ -63,67 +67,48 @@ export class ExampleHttpDao {
*/
export class ExampleDataSource extends DataSource<GithubIssue> {
// The number of issues returned by github matching the query.
resultsLength: number = 0;
resultsLength = 0;
isLoadingResults: boolean;
isRateLimitReached: boolean;
constructor(private _exampleDatabase: ExampleHttpDao,
private _sort: MdSort,
private _paginator: MdPaginator) {
constructor(private exampleDatabase: ExampleHttpDao,
private paginator: MdPaginator,
private sort: MdSort) {
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<GithubIssue[]> {
const displayDataChanges = [
this._sort.mdSortChange,
this._paginator.page,
this.sort.mdSortChange,
this.paginator.page
];
// If the user changes the sort order, reset back to the first page.
this._sort.mdSortChange.subscribe(() => {
this._paginator.pageIndex = 0;
});
this.sort.mdSortChange.subscribe(() => this.paginator.pageIndex = 0);
return Observable.merge(...displayDataChanges)
.startWith(null)
.switchMap(() => {
this.isLoadingResults = true;
return this._exampleDatabase.getRepoIssues(
this._sort.active, this._sort.direction, this._paginator.pageIndex);
})
.catch(() => {
// Catch if the GitHub API has reached its rate limit. Return empty result.
this.isRateLimitReached = true;
return Observable.of(null);
})
.map(result => {
// Flip flag to show that loading has finished.
this.isLoadingResults = false;
return result;
})
.map(result => {
if (!result) { return []; }
this.isRateLimitReached = false;
this.resultsLength = result.json().total_count;
return this.readGithubResult(result);
});
.startWith(null)
.switchMap(() => {
this.isLoadingResults = true;
return this.exampleDatabase.getRepoIssues(
this.sort.active, this.sort.direction, this.paginator.pageIndex);
})
.map(data => {
// Flip flag to show that loading has finished.
this.isLoadingResults = false;
this.isRateLimitReached = false;
this.resultsLength = data.total_count;
return data.items;
})
.catch(() => {
this.isLoadingResults = false;
// Catch if the GitHub API has reached its rate limit. Return empty data.
this.isRateLimitReached = true;
return Observable.of(null);
});
}
disconnect() {}
private readGithubResult(result: Response): GithubIssue[] {
return result.json().items.map(issue => {
return {
number: issue.number,
created: new Date(issue.created_at),
state: issue.state,
title: issue.title,
};
});
}
}