如何将md表(cdk数据表)连接到用作数据源的服务?

问题描述

对不起，但我对这个感到困惑.

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);
  }

我的 ngOnInit()方法在启动时调用该函数，并获得了由 ngFor 迭代的一系列比赛，而我在创建表时没有遇到任何问题.

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.

我想要的是实现md-table或cdk-table组件.我有使用该UI库的其余应用程序.

What I want is to implement md-table or cdk-table component. I have the rest of the app using that UI library.

• 我知道我的进口货是正确的.
• HTML似乎很好，因为显示了我拥有的单个标头
• 控制台中没有错误，但是 competitionsDataSource 似乎为空.

• 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.

这是比赛课程:

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"

The result is just the header "CompName"

请帮助！

推荐答案

您无法定义let row，然后将数据绑定到{{competition.compName}}.您需要将声明切换为let competition或使用row进行数据绑定.

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.

要么:

<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().这是表格简化版的柱塞示例.

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表(cdk数据表)连接到用作数据源的服务?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！