如何将我的 md-table(cdk 数据表)连接到要用作数据源的服务? [英] How do I connect my md-table (cdk data-table) to a service to be used as the data source?
问题描述
抱歉,我对此一无所知.
我有一个返回对象数组的方法,我使用该对象数组来显示表格.这是我正在使用的功能:
getCompetitions(): Promise{让选项:RequestOptionsArgs = {};让参数 = 新的 URLSearchParams();params.append('size', '250');options.params = params;返回 this.http.get(this.competitionsUrl,options).承诺().then(response => response.json()._embedded.competitions as Competition[]).catch(this.handleError);}
我的 ngOnInit() 方法在开始时调用该函数并获取一组使用 ngFor 迭代的比赛,我在创建表格时没有出现问题.
我想要的是实现 md-table 或 cdk-table 组件.我有使用该 UI 库的应用程序的其余部分.
- 我知道我的导入是正确的.
- HTML 似乎没问题,因为显示了我的单个标题
- 控制台中没有错误,但 competitionsDataSource 似乎为空.
我在下面添加了我的文件,我知道问题出在实现中或者我试图填充数据源的方式.
这是竞赛类:
出口类比赛{compName:字符串;compStart:日期;compEnd:日期;compFull:数字;compTeamCount:数量;compChamp:数字;compRunnerup:数量;compType:数字;compCountry:字符串;_链接:{自己: {href:字符串;},火柴: {href:字符串;}}}
这是组件
import { Component, OnInit } from '@angular/core';从@angular/cdk"导入{数据源};从 'rxjs/Observable' 导入 { Observable };从'rxjs/BehaviorSubject'导入{BehaviorSubject};从'../../competition/competition'导入{竞争};从 '../../competition/competition.service' 导入 { CompetitionService }导入 'rxjs/add/operator/startWith';导入 'rxjs/add/observable/merge';导入 'rxjs/add/operator/map';@成分({选择器:'comp-table-cmp',模块 ID:module.id,templateUrl: 'competitions-table.component.html',})导出类 CompetitionsTableComponent{//1- 定义我的列displayColumns = ['compName'];//2- 将数据库定义为新数据库竞赛数据库 = 新竞赛数据库();//3- 定义数据源竞赛数据源:竞赛数据源 |空值;ngOnInit() {//4 - 声明数据源.this.competitionsDatasource = new CompetitionsDatasource(this.competitionsDatabase);console.log(this.competitionsDatasource);}}导出类竞赛数据库{比赛:比赛[];dataChange: BehaviorSubject<Competition[]>= new BehaviorSubject([]);获取数据():竞争[] {this.competitions = [];this.competitionService.getCompetitions().then(结果 =>{结果.forEach(结果=> {如果(result.compType === 1){this.competitions.push(result);this.dataChange.next(结果);}//调用方法来检索团队名称.});返回结果;})控制台日志(this.dataChange);返回 this.competitions;}构造函数(私人竞争服务:竞争服务,) {}}导出类 CompetitionsDatasource 扩展了 DataSource{构造函数(私有_exampleDatabase:竞赛数据库){极好的();}/** 表调用的连接函数以检索包含要呈现的数据的流.*/connect(): Observable{console.log('ExampleDataSource#connect')返回 this._exampleDatabase.dataChange;}断开连接(){}}
和 HTML:
<cdk-table #table [dataSource]="CompetitionsDatasource" class="example-table"><!--- 请注意,这些列可以按任何顺序定义.实际呈现的列被设置为行定义上的属性" --><!-- CompName 列--><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-容器><cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row><cdk-row *cdkRowDef="让行;列:displayColumns;"class="example-row"></cdk-row></cdk-table>
结果只是标题CompName"
请帮忙!
你不能定义 let row
然后将数据绑定到 {{competition.compName}}
.您需要将声明切换为 let Competition
或使用 row
进行数据绑定.
要么:
{{row.compName}}
或者:
{{competition.compName}} </cdk-cell>
此外,您可以仅通过扩展 DataSource
类来进行数据检索和 connect()
.这是简化版表格的Plunker 示例.
Sorry but I'm in the dark with this one.
I have a method that returns an array of objects and I use that array of objects to display a table. this is the function that I'm using:
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);
}
My ngOnInit() method was calling that function on start and getting an array of competitions which was iterated with ngFor and I was creating the table without a problem.
What I want is to implement md-table or cdk-table component. I have the rest of the app using that UI library.
- I know my imports are correct.
- The HTML seems to be fine because the single header I have is displayed
- There are no errors in the console but the competitionsDataSource seems to be Empty.
I add my files below, I know the problem is in the implementation or how I'm trying to populate the dataSource.
Here is the competition class:
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;
}
}
}
Here is the Component
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() {}
}
And the 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>
The result is just the header "CompName"
Please help!
You can't define let row
and then do data binding to {{competition.compName}}
. You need to switch the declaration to let competition
OR do the data binding with row
.
Either:
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.compName}} </cdk-cell>
Or:
<cdk-cell *cdkCellDef="let competition" class="example-cell"> {{competition.compName}} </cdk-cell>
Also, you can do the data retrieval and connect()
by extending DataSource
class only. Here's a Plunker example of simplified version of your table.
这篇关于如何将我的 md-table(cdk 数据表)连接到要用作数据源的服务?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!