材料2の汎用クラスコードを書き込む方法データテーブル

こんにちは私は、材料データテーブル用の汎用クラスコードを作成しようとしています。これは、将来、フィルタリングとページネーションが必要になるかもしれません。材料2の汎用クラスコードを書き込む方法データテーブル

私は私のプロジェクトで複数のテーブル

import {Component, ViewChild} from '@angular/core'; 
import {DataSource} from '@angular/cdk/collections'; 
import {MatSort} 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'; 

/** 
* @title Table with sorting 
*/ 
@Component({ 
    selector: 'table-sorting-example', 
    styleUrls: ['table-sorting-example.css'], 
    templateUrl: 'table-sorting-example.html', 
}) 
export class TableSortingExample { 
    displayedColumns = ['userId', 'userName', 'progress', 'color']; 
    exampleDatabase = new ExampleDatabase(); 
    dataSource: ExampleDataSource | null; 

    @ViewChild(MatSort) sort: MatSort; 

    ngOnInit() { 
    this.dataSource = new ExampleDataSource(this.exampleDatabase, this.sort); 
    } 
} 

/** Constants used to fill up our data base. */ 
const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', 
    'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; 
const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 
    'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', 
    'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; 

export interface UserData { 
    id: string; 
    name: string; 
    progress: string; 
    color: string; 
} 

/** 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[] { return this.dataChange.value; } 

    constructor() { 
    // Fill up the database with 100 users. 
    for (let i = 0; i < 100; i++) { this.addUser(); } 
    } 

    /** Adds a new user to the database. */ 
    addUser() { 
    const copiedData = this.data.slice(); 
    copiedData.push(this.createNewUser()); 
    this.dataChange.next(copiedData); 
    } 

    /** Builds and returns a new User. */ 
    private createNewUser() { 
    const name = 
     NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + 
     NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; 

    return { 
     id: (this.data.length + 1).toString(), 
     name: name, 
     progress: Math.round(Math.random() * 100).toString(), 
     color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] 
    }; 
    } 
} 

/** 
* Data source to provide what data should be rendered in the table. Note that the data source 
* can retrieve its data in any way. In this case, the data source is provided a reference 
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage 
* the underlying data. Instead, it only needs to take the data and send the table exactly what 
* should be rendered. 
*/ 
export class ExampleDataSource extends DataSource<any> { 
    constructor(private _exampleDatabase: ExampleDatabase, private _sort: MatSort) { 
    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._sort.sortChange, 
    ]; 

    return Observable.merge(...displayDataChanges).map(() => { 
     return this.getSortedData(); 
    }); 
    } 

    disconnect() {} 

    /** Returns a sorted copy of the database data. */ 
    getSortedData(): UserData[] { 
    const data = this._exampleDatabase.data.slice(); 
    if (!this._sort.active || this._sort.direction == '') { return data; } 

    return data.sort((a, b) => { 
     let propertyA: number|string = ''; 
     let propertyB: number|string = ''; 

     switch (this._sort.active) { 
     case 'userId': [propertyA, propertyB] = [a.id, b.id]; break; 
     case 'userName': [propertyA, propertyB] = [a.name, b.name]; break; 
     case 'progress': [propertyA, propertyB] = [a.progress, b.progress]; break; 
     case 'color': [propertyA, propertyB] = [a.color, b.color]; break; 
     } 

     let valueA = isNaN(+propertyA) ? propertyA : +propertyA; 
     let valueB = isNaN(+propertyB) ? propertyB : +propertyB; 

     return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1); 
    }); 
    } 
}

が自分のしているとしてコンポーネントを作成しようとしていますしかし、彼らの例では列がスイッチケースに指定されているが、このために周りに自分のすべての作業をなどの一般的なように書かBにあります

<mat-row *cdkRowDef="let row; columns: ['select', 'userId', 'userName', 'progress', 'color'];"> </mat-row>

：私は複数のテーブル

出典

2017-11-06 Sujeetkumar Phadtare