![](/img/trans.png)
[英]How do I implement md-paginator and md-sort in an md-table from a service?
[英]How do I connect my md-table (cdk data-table) to a service to be used as the data source?
對不起,我在這個黑暗中。
我有一個方法返回一個對象數組,我使用該對象數組來顯示一個表。 這是我正在使用的功能:
getCompetitions(): Promise<Competition[]> {
let options: RequestOptionsArgs = {};
let params = new URLSearchParams();
params.append('size', '250');
options.params = params;
return this.http.get(this.competitionsUrl,options)
.toPromise()
.then(response => response.json()._embedded.competitions as Competition[])
.catch(this.handleError);
}
我的ngOnInit()方法在啟動時調用該函數並獲得一個使用ngFor迭代的競爭數組,我正在創建表而沒有問題。
我想要的是實現md-table或cdk-table組件。 我使用該UI庫完成了應用程序的其余部分。
我在下面添加我的文件,我知道問題在於實現或我是如何嘗試填充dataSource的。
這是比賽課程:
export class Competition {
compName: string;
compStart: Date;
compEnd: Date;
compFull: number;
compTeamCount: number;
compChamp: number;
compRunnerup: number;
compType: number;
compCountry: string;
_links: {
self: {
href: string;
},
matches: {
href: string;
}
}
}
這是組件
import { Component, OnInit } from '@angular/core';
import { DataSource } from '@angular/cdk';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Competition } from '../../competition/competition';
import { CompetitionService } from '../../competition/competition.service'
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
@Component({
selector: 'comp-table-cmp',
moduleId: module.id,
templateUrl: 'competitions-table.component.html',
})
export class CompetitionsTableComponent{
//1- Define my columns
displayedColumns = ['compName'];
//2- Define the database as a new database
competitionsDatabase = new CompetitionsDatabase();
//3- Define the datasource
competitionsDatasource: CompetitionsDatasource | null;
ngOnInit() {
//4 - declare the datasource.
this.competitionsDatasource = new CompetitionsDatasource(this.competitionsDatabase);
console.log(this.competitionsDatasource);
}
}
export class CompetitionsDatabase {
competitions: Competition[];
dataChange: BehaviorSubject<Competition[]> = new BehaviorSubject<Competition[]>([]);
get data(): Competition[] {
this.competitions = [];
this.competitionService.getCompetitions().then(
results => {
results.forEach(result => {
if (result.compType === 1) {
this.competitions.push(result);
this.dataChange.next(results);
}
//Call Method to retrieve team names.
});
return results;
}
)
console.log(this.dataChange);
return this.competitions;
}
constructor(
private competitionService: CompetitionService,
) {}
}
export class CompetitionsDatasource extends DataSource<any> {
constructor(private _exampleDatabase: CompetitionsDatabase) {
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<Competition[]> {
console.log('ExampleDataSource#connect')
return this._exampleDatabase.dataChange;
}
disconnect() {}
}
和HTML :
<div class="example-container mat-elevation-z8">
<cdk-table #table [dataSource]="CompetitionsDatasource" class="example-table">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- CompName Column -->
<ng-container cdkColumnDef="compName">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> CompName </cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{competition.compName}} </cdk-cell>
</ng-container>
<cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row>
<cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"></cdk-row>
</cdk-table>
</div>
結果只是標題“CompName”
請幫忙!
您無法定義let row
,然后將數據綁定到{{competition.compName}}
。 您需要切換聲明以let competition
或與row
進行數據綁定。
或者:
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.compName}} </cdk-cell>
要么:
<cdk-cell *cdkCellDef="let competition" class="example-cell"> {{competition.compName}} </cdk-cell>
此外,您可以通過僅擴展DataSource
類來執行數據檢索和connect()
。 這是一個簡短版本的表的Plunker示例 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.