Итак, я следую за документацией angular 2 material DataTables
. Сначала он работал с предоставлением кодов в документации. Однако я немного изменил код, так что если я собираюсь предоставить реальные данные, это будет не так сложно, как следование документации по угловому материалу, потому что я к этому уже привык. Внедрите весь импорт в мой TS File
import { Component, OnInit, ViewChild } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';
импортируется весь импорт, необходимый для таблиц angular данных. CdkTableModule
также импортируется в мой materialModule
import { CdkTableModule } from '@angular/cdk/table';
@NgModule({
imports: [
CdkTableModule,
..... as so on..
],
exports: [
CdkTableModule,
..... as so on..
]
}) export class MaterialModule { }
Я собираюсь показать важные коды, которые необходимы для таблиц данных
export class ManageGaragesComponent implements OnInit {
displayedColumns = ['Garage Name', 'Address', 'Status', 'Slots'];
exampleDatabase = new ExampleDatabase();
dataSource: ManageGarageDataSource | null;
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit() {
this.dataSource = new ManageGarageDataSource(this.exampleDatabase, this.paginator);
}
}
export interface UserData {
garageName: string;
address: string;
status: number;
slots: number;
}
/** An example database that the data source uses to retrieve data for the table. */
export class ExampleDatabase {
/** Stream that emits whenever the data has been modified. */
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
get data(): UserData[] {
let garage_Data = [
{garageName: '1 Ortigas Ave', address: 'Hydrogen', status: 1.0079, slots: 5},
{garageName: '2 Ortigas Ave', address: 'Helium', status: 4.0026, slots: 6},
{garageName: '3 Ortigas Ave', address: 'Lithium', status: 6.941, slots: 1},
{garageName: '4 Ortigas Ave', address: 'Beryllium', status: 9.0122, slots: 1},
{garageName: '5 Ortigas Ave', address: 'Boron', status: 10.811, slots: 1},
{garageName: '6 Ortigas Ave', address: 'Carbon', status: 12.0107, slots: 1},
{garageName: '7 Ortigas Ave', address: 'Nitrogen', status: 14.0067, slots: 2},
{garageName: '8 Ortigas Ave', address: 'Oxygen', status: 15.9994, slots: 3},
{garageName: '9 Ortigas Ave', address: 'Fluorine', status: 18.9984, slots: 4},
{garageName: '10 Ortigas Ave', address: 'Neon', status: 20.1797, slots: 5},
{garageName: '11 Ortigas Ave', address: 'Sodium', status: 22.9897, slots: 6},
{garageName: '12 Ortigas Ave', address: 'Magnesium', status: 24.305, slots: 6},
{garageName: '13 Ortigas Ave', address: 'Aluminum', status: 26.9815, slots: 6},
{garageName: '14 Ortigas Ave', address: 'Silicon', status: 28.0855, slots: 8},
{garageName: '15 Ortigas Ave', address: 'Phosphorus', status: 30.9738, slots: 8},
{garageName: '16 Ortigas Ave', address: 'Sulfur', status: 32.065, slots: 2},
{garageName: '17 Ortigas Ave', address: 'Chlorine', status: 35.453, slots: 6},
{garageName: '18 Ortigas Ave', address: 'Argon', status: 39.948, slots: 8},
{garageName: '19 Ortigas Ave', address: 'Potassium', status: 39.0983, slots: 6},
{garageName: '20 Ortigas Ave', address: 'Calcium', status: 40.078, slots: 1},
];
return garage_Data;
}
constructor() {
this.dataChange.next(this.data);
}
}
export class ManageGarageDataSource extends DataSource<any> {
constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MatPaginator) {
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<UserData[]> {
const displayDataChanges = [
this._exampleDatabase.dataChange,
this._paginator.page,
];
return Observable.merge(...displayDataChanges).map(() => {
const data = this._exampleDatabase.data.slice();
console.log(data);
// Grab the page slice of data.
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
return data.splice(startIndex, this._paginator.pageSize);
});
}
disconnect() {}
}
так что это мои коды TS. также мой HTML
<mat-table #table [dataSource]="dataSource">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- garage name Column -->
<ng-container matColumnDef="garageName">
<mat-header-cell *matHeaderCellDef> Garage Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.garageName}} </mat-cell>
</ng-container>
<!-- address Column -->
<ng-container matColumnDef="address">
<mat-header-cell *matHeaderCellDef> Address </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.address}}% </mat-cell>
</ng-container>
<!-- status Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.status}} </mat-cell>
</ng-container>
<!-- slots Column -->
<ng-container matColumnDef="slots">
<mat-header-cell *matHeaderCellDef> Slots </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.slots}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator #paginator
[length]="exampleDatabase.data.length"
[pageIndex]="0"
[pageSize]="5"
[pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
однако это дает мне ошибку. Error: cdk-table: Could not find column with id "Garage Name".
. этот дает мне трудное время, чтобы понять, как работать над этим. может кто-то указать мне, где ошибка. потому что я изменяю класс для userData
с элементом garageName вместо Id.