Md tablomu (cdk veri tablosu) veri kaynağı olarak kullanılacak bir hizmete nasıl bağlarım?

Question

Özür dilerim ama bununla karanlıktayım.

Bir nesne dizisi döndüren bir yöntem var ve bir tabloyu görüntülemek için bu nesne nesnesini kullanıyorum. Bu kullanıyorum fonksiyonudur:

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

Benim ngOnInit() yöntem başlangıcında üzerinde bu işlevi çağırmak ve ngFor ile iterated edildi yarışmalarda bir dizi alma ve ben olmadan tabloyu yaratıyordu edildi bir sorun.

Benim istediğim md-table veya cdk-table bileşenini uygulamaktır. Bu kullanıcı arayüzü kütüphanesini kullanarak uygulamanın geri kalanını kullanıyorum.

• İthalatlarımın doğru olduğunu biliyorum.
• HTML ben tek başlık
• görüntülenir çünkü konsolda herhangi bir hata yok iyi olacak gibi görünüyor ama competitionsDataSource Boş gibi görünüyor.

Dosyalarıma aşağıdan eklemek istiyorum, sorunun uygulamada olduğunu biliyorum veya veri kaynağını yerleştirmeye çalışıyorum. İşte

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

olan Bileşen

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() {} 
} 

Ve 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> 

İşte

rekabet sınıftırSonuç sadece "CompName" başlığıdır.

Lütfen yardım edin!

Answer 1

let row tanımlayamazsınız ve daha sonra {{competition.compName}} numaralı sayfaya bağlanırsınız. Bildirimi let competition olarak değiştirmeli VEYA row ile veri bağlamayı yapmalısınız.

Ya:

<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.compName}} </cdk-cell> 

Veya: Ayrıca

<cdk-cell *cdkCellDef="let competition" class="example-cell"> {{competition.compName}} </cdk-cell> 

, sadece DataSource sınıfını genişleterek veri alma ve connect() yapabilirsiniz. İşte tablonuzun Plunker example basitleştirilmiş versiyonudur.