material2データテーブルの使用方法

Question

Material2データテーブル を実装しようとしています。しかし、適切な方法でそれを使用する方法を理解することはできません。

import {Component, ElementRef, ViewChild} from '@angular/core';
import {DataSource} from '@angular/cdk';
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/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/observable/fromEvent';

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

  @ViewChild('filter') filter: ElementRef;

  ngOnInit() {
    this.dataSource = new ExampleDataSource(this.exampleDatabase);
    Observable.fromEvent(this.filter.nativeElement, 'keyup')
        .debounceTime(150)
        .distinctUntilChanged()
        .subscribe(() => {
          if (!this.dataSource) { return; }
          this.dataSource.filter = this.filter.nativeElement.value;
        });
  }
}

/** 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> {
  _filterChange = new BehaviorSubject('');
  get filter(): string { return this._filterChange.value; }
  set filter(filter: string) { this._filterChange.next(filter); }

  constructor(private _exampleDatabase: ExampleDatabase) {
    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._filterChange,
    ];

    return Observable.merge(...displayDataChanges).map(() => {
      return this._exampleDatabase.data.slice().filter((item: UserData) => {
        let searchStr = (item.name + item.color).toLowerCase();
        return searchStr.indexOf(this.filter.toLowerCase()) != -1;
      });
    });
  }

  disconnect() {}
}

上記は、私にとって非常に紛らわしいデータテーブルのコードです。彼らのドキュメントでさえ非常に貧弱です。誰かが上記のコードの流れを説明できますか？

質問が基本的すぎて質問できないと感じたら無視してください。

Answer 1

この例のコードは、material2仕様の新しいcdkコンポーネントを使用した汎用テーブルの定義です。 md-tableはcdk-tableの視覚的な実装であることに留意する必要があるため、HTMLのmdモデルと互換性のあるモデルでcdkを宣言する必要があります。

例えば：

次の実装でcdk-tableを宣言します。

1. まず、依存関係：

Material2の新しいCDKコンポーネント：次を使用：

import { DataSource } from '@angular/cdk';
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';

1. TSのHTMLの構造の定義：

displayedColumns配列を定義します。アイテムは次の順序でHTMLテーブルの列です。

displayedColumns = ['userId', 'userName', 'progress'];

タイプExampleDatabase（特定の手動定義を持つオブジェクト）のデータベース：

exampleDatabase = new ExampleDatabase();

最後に、dataSourceを宣言します。これは私のデータの起源です。これは、手動定義またはデータnullを持つオブジェクトです。

dataSource: ExampleDataSource | null;

ngOnInit()メソッドでは、dataSourceが新しいExampleDataSourceであり、パラメーターがexampleDataBaseであると宣言するだけです。

これで、残りのコードを実装できます。

最初に、DataBaseのインターフェースを宣言します。これはデータの一致を維持するために非常に重要です。データベースは定義されたスキームを尊重する必要があります。この例では、データベースにはid、name、progressの3つの列があります。

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

次のポイントは、ExampleDatabase内のデータの定義を使用してクラス（オブジェクト）DataBaseを作成することです。実際のデータベース（PostgreSQL、MongoDB）に接続するためのサービスを作成し、別のメソッドで実際のデータを取得してcdk-datatableのオブジェクトを作成できますが、この例では、実行時にエミュレートされるインメモリデータベースを使用しています。

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

    return {
      id: 1,
      name: 'example',
      progress: Math.round(Math.random() * 100).toString()
    };
  }
}

最後に、DataSourceの定義を使用して2番目のクラスを作成します。

export class ExampleDataSource extends DataSource<any> {
  constructor(private _exampleDatabase: ExampleDatabase) {
    super();
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<UserData[]> {
    return this._exampleDatabase.dataChange;
  }

  disconnect() { }
}

このメソッドは、データが正しい形式であることを確認し、DataBase（メモリ内）への「接続」を解放して、データを取得します。

最後に、HTMLでmd-tableコンポーネントまたはcdk-tableコンポーネントを使用します。 md-tableコンポーネントはマテリアルデザインスタイルを使用し、cdk-tableは汎用スタイルを使用します。

md-table：

<div class="example-container mat-elevation-z8">
  <md-table #table [dataSource]="dataSource">

    <!-- ID Column -->
    <ng-container cdkColumnDef="userId">
      <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container cdkColumnDef="progress">
      <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container cdkColumnDef="userName">
      <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
    </ng-container>

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
  </md-table>
</div>

cdk-table：

<div class="example-container mat-elevation-z8">
  <cdk-table #table [dataSource]="dataSource" class="example-table">

    <!-- ID Column -->
    <ng-container cdkColumnDef="userId">
      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> ID </cdk-header-cell>
      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.id}} </cdk-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container cdkColumnDef="progress">
      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Progress </cdk-header-cell>
      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.progress}}% </cdk-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container cdkColumnDef="userName">
      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Name </cdk-header-cell>
      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.name}} </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>

残りの実装、検索、メニュー、チェックボックスなどは、情報を操作するためのロジックを実装する責任があります。

詳細については、cdk-tableに関するドキュメントを使用してください。

https://material.angular.io/guide/cdk-table

結果：

セイバーと達成をしてください、私は私の説明を理解し、私の英語を謝ります。私は学んでいます。

Answer 2

出席を表示するために作成されたカスタマイズされたコードは次のとおりです。現在、データをハードコーディングしています。動的データを取得するためのサービスの代わりにサービスを呼び出すことができます。

app.component.ts

import { Component, OnInit, ElementRef, ViewEncapsulation, ViewChild } from '@angular/core';
import { DataSource } from '@angular/cdk';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { MdPaginator, MdSort } from '@angular/material';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
declare let d3: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent implements OnInit {

  displayedColumns = ['shiftDate', 'swipeIn', 'swipeOut', 'duration', 'status'];
  exampleDatabase = new ExampleDatabase();
  dataSource: ExampleDataSource | null;

  @ViewChild(MdPaginator) paginator: MdPaginator;
  @ViewChild(MdSort) sort: MdSort;

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

export interface attendanceData {
  shiftDate: string;
  swipeIn: string;
  swipeOut: string;
  duration: string;
  status: 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<attendanceData[]> = new BehaviorSubject<attendanceData[]>([]);
  get data(): attendanceData[] {

    let data = [
      {
        "shiftDate": "17-July-2017",
        "swipeIn": "10:00 AM",
        "swipeOut": "06:00 PM",
        "duration": "8 Hours",
        "status": "PRESENT"

      },
      {
        "shiftDate": "16-July-2017",
        "swipeIn": "9:00 AM",
        "swipeOut": "5:00 AM",
        "duration": "7 Hours",
        "status": "PRESENT"
      }

    ];

    return data;
  }

  constructor() {

    this.dataChange.next(this.data);
  }

}

export class ExampleDataSource extends DataSource<any> {
  _filterChange = new BehaviorSubject('');
  get filter(): string { return this._filterChange.value; }
  set filter(filter: string) { this._filterChange.next(filter); }

  constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MdPaginator, private _sort: MdSort) {
    super();
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<attendanceData[]> {
    const displayDataChanges = [
      this._exampleDatabase.dataChange,
      this._paginator.page,
      this._sort.mdSortChange
    ];

    return Observable.merge(...displayDataChanges).map(() => {
      // const data = this._exampleDatabase.data.slice();
      const data = this.getSortedData();
      // Grab the page's slice of data.
      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
      return data.splice(startIndex, this._paginator.pageSize);
    });
  }

  disconnect() { }

  getSortedData(): attendanceData[] {
    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 'shiftDate': [propertyA, propertyB] = [a.shiftDate, b.shiftDate]; break;
        case 'swipeIn': [propertyA, propertyB] = [a.swipeIn, b.swipeIn]; break;
        case 'swipeOut': [propertyA, propertyB] = [a.swipeOut, b.swipeOut]; break;
        case 'duration': [propertyA, propertyB] = [a.duration, b.duration]; break;
      }

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

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

app.component.html

<div class="example-container mat-elevation-z8">
  <md-table #table [dataSource]="dataSource" mdSort>
    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- ID Column -->
    <ng-container cdkColumnDef="shiftDate">
      <md-header-cell *cdkHeaderCellDef md-sort-header> Shift Date </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.shiftDate}} </md-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container cdkColumnDef="swipeIn">
      <md-header-cell *cdkHeaderCellDef md-sort-header> Swipe In </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.swipeIn}}% </md-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container cdkColumnDef="swipeOut">
      <md-header-cell *cdkHeaderCellDef> Swipe Out </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.swipeOut}} </md-cell>
    </ng-container>

    <!-- Color Column -->
    <ng-container cdkColumnDef="duration">
      <md-header-cell *cdkHeaderCellDef>Duration</md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.duration}} </md-cell>
    </ng-container>


    <!-- Color Column -->
    <ng-container cdkColumnDef="status">
      <md-header-cell *cdkHeaderCellDef>Status</md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.status}} </md-cell>
    </ng-container>

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
  </md-table>

    <md-paginator #paginator
                [length]="exampleDatabase.data.length"
                [pageIndex]="0"
                [pageSize]="25"
                [pageSizeOptions]="[5, 10, 25, 100]">
  </md-paginator>

</div>

app.module.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { MaterialModule, MdTableModule  } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CdkTableModule } from '@angular/cdk';


import { AppComponent } from './app.component';



@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserAnimationsModule,
    CdkTableModule,
    BrowserModule,
    MaterialModule, MdTableModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 3

ここに私が書いた記事があります。あなたがここで知る必要があるすべてを見つけるでしょう。 https://medium.com/@fnote/md-tables-angular-material-be2c45947955

完全なコードはここにあります https://material.angular.io/components/table/overview

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

必要なパッケージをインポートします。 angularマテリアルをインストールするときに、必ずangular cdkをインストールしてください。先に進む前に、データソースとは何か、観察可能なものとは何か、動作の対象は何か、さらにはrxjsについて言及する方が良いでしょう。

RXJSは、最近のフロントエンド開発のホットトピックです。これは、リアクティブプログラミング用のJavaScriptライブラリです（リアクティブプログラミングは、ソフトウェアアプリケーションを構築する方法にすぎません。基本的に、ソフトウェアは、発生する変更（クリックイベントなど） 、取得するデータなど））Observablesを使用して、非同期コードまたはコールバックベースのコードを簡単に作成できるようにします。 mdテーブルはその上に構築されるため、cdkはインポートされます。 Cdkテーブルは、mdテーブルの基礎です。

オブザーバブルとは何ですか？

経時的に複数の値を処理できるオブザーバブルの能力は、リアルタイムデータ、イベント、および考えられるあらゆる種類のストリームを操作するための良い候補となります。 Observablesを使用すると、ストリームからの値のインフローを操作する際の制御が向上します。 Observableはデータソースのラッパーであり、データソースは値のストリームであり、新しい値が発生するたびに何かをしたいときに複数の値を出力する可能性があります。サブスクリプションを介してオブザーバーとオブザーバブルを接続します。サブスクリプションは、これらの価値の流れを聞いている人がいると言っています。オブザーバーはObservableにサブスクライブします。 Observableは、オブザーバーのメソッドを呼び出して、アイテムを送信するか、オブザーバーに通知を送信します。オブザーバーは最大3つのメソッドを実装します。それらはcomplete（）、next（）およびonerror（）です。 next（）メソッドは、新しい値が発行されるたびにobservableによって呼び出されます。observableがエラーをスローするたびに、onerror（）メソッドが呼び出されます。observableが実行され、将来、新しい値がないことを認識した場合complete（）メソッドを呼び出します。

RXJSライブラリについてのYouTubeのアカデミーのシリーズをフォローして、RXJSの機能、オブザーバー、オブザーバブル、サブジェクト、動作サブジェクト、サブスクリプションについてより深く理解することを強くお勧めします。

コードを続けましょう

@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})

これは通常のangularです4.selectorは外部の関係者がコンポーネントを参照する名前です。styleUrlはこのコンポーネントがスタイル設定のために参照する場所であり、コンポーネントの基本的なhtmlはテンプレートのURL。

export class TableBasicExample {
displayedColumns = ['userId', 'userName', 'progress', 'color'];
exampleDatabase = new ExampleDatabase();
dataSource: ExampleDataSource | null;
ngOnInit() {
this.dataSource = new ExampleDataSource(this.exampleDatabase);
}
}

ここでは、最初に、ブラウザに表示する必要があるテーブルのすべての列の配列を作成します（列見出し）。この配列は、htmlファイルから再び参照されます。

さらに、サンプルのデータベースクラスのインスタンスと、最初はデータを持たないデータソースのインスタンスを作成します。次に、サンプルデータベースのデータがこのデータソースに注入されて、最初は空であるため、データを入力します。Ng onitintは、コンポーネントの作成の完了をマークするためにangularによって呼び出されるライフサイクルフックです。

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'];

2つの配列があります。これらはサンプルデータベースを満たします。

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

ここで、定義されたインターフェースがあります。ここで言及した変数は、最終的にテーブルの列になります。

export class ExampleDatabase {
 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(); }
}
addUser() {
const copiedData = this.data.slice();
copiedData.Push(this.createNewUser());
this.dataChange.next(copiedData);
}
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))]
};
}
}

これは、データソースがテーブルのデータを取得するために使用するサンプルデータベースです。定義されている配列は2つだけですが、実際には4つの列が表示されます。配列のデータから2列を入力できますが、他の2列のデータはこのクラス内で生成する必要があります。

では、サブジェクトとは何ですか？Observableは値自体を出力することはできませんが、自分で実行できるようにしたいのですが、新しい値を出力する必要がある場合は私たち自身が主題について行かなければなりません。 Subjectはobservableから継承するObservableですが、その上でnext（）メソッドを手動で呼び出して、新しい値の発行をトリガーできます。したがって、サブジェクトはアクティブなオブザーバブルです。オブザーバブルであることに加えてオブザーバーであるため、サブスクライブすることに加えて、サブジェクトに値を送信することもできます。

行動の主題とは何ですか？行動の主題は特別な種類の主題ですが、主題とは異なり初期値があります。 next（）Rx.subject（）サブスクリプションが最初に何も取得しない場合でも、サブスクリプションで常に値を返す必要があるため、初期値が必要ですRx.behaviorsubject（ 'a'）subscription get 'a'最初は

Const nameで記述されたコードについては心配しないでください。names配列には約20個の名前がありますが、100個の異なる名前が必要です。ここでは、イニシャルをランダムパターンに変更します。

進行状況もランダムに計算されます。

データの変更は、動作サブジェクトのタイプの変数です。

this.dataChange.next(copiedData); 

..新しいユーザーが配列にプッシュされるたびに、サブスクライバーにデータ変更が通知されます。 Datachangeは、データが変更されるたびに発生する一種のStreamです。初期値の配列を持つ動作サブジェクトであるdatachangeという変数を作成します。コピーされたデータと呼ばれる配列を作成します4つのプロパティを持つ新しいユーザーを作成します。ユーザーは、これらの4つのプロパティが属性であるオブジェクトのように作成されます。新しいユーザーを追加した状態でnextメソッドを呼び出す特別なobservableとsubjectでnextメソッドを呼び出しますテーブルにレンダリングするデータを提供するデータソース。データソースはどのような方法でもデータを取得できることに注意してください。この場合、データソースには、共通データベース、ExampleDatabaseへの参照が提供されます。データソースは、データを取得し、レンダリングするものを正確に表に送信しますが、それ以外は何も送信しません。

export class ExampleDataSource extends DataSource<any> {
constructor(private _exampleDatabase: ExampleDatabase) {
super();
}
connect(): Observable<UserData[]> {
return this._exampleDatabase.dataChange;
}
 disconnect() {}
 }

テーブルをデータソースに接続する

データは、DataSourceを介してテーブルに提供されます。

接続関数は、データテーブルなどのコレクションビューアーをデータソースに接続します。 Connect関数は、レンダリングされるデータを含むストリームを取得するためにテーブルによって呼び出されます。この接続機能にはパラメーターを指定する必要があります。テーブルがデータソースを受け取ると、データソースの接続関数を呼び出し、データの配列を出力するオブザーバブルを返します。データソースがこのストリームにデータを送信するたびに、テーブルが更新されます。データソースはこのストリームを提供するため、テーブルの更新をトリガーする責任があります。これは、Webソケット接続、ユーザーインタラクション、モデルの更新、時間ベースの間隔など、何に基づいてもかまいません。最も一般的には、更新はソートやページネーションなどのユーザーインタラクションによってトリガーされます。切断機能は、テーブルとデータソース間の接続を切断します。 HTMLファイルまたはテンプレートを見てみましょう。セルテンプレート

<ng-container cdkColumnDef="color">
     <md-header-cell *cdkHeaderCellDef>Color</md-header-cell>
     <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} 
</md-cell>
</ng-container>

まず、テーブルの列を定義します。ディレクティブcdkColumnDefを使用して、各列に名前を付けます。これは、テーブル内のこの特定の列が他の場所から参照される名前です。各列は、ヘッダーセルテンプレートとデータセルtemplate.headerセルは列の名前を提供および表示し、セルテンプレートは表示されるべきデータを取得し、それらを行のヘッダーの下に表示します。 cdkCellDefは行コンテキストテーブルのヘッダー行とデータ行をエクスポートします。以下に行テンプレートを示します。

 <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
 <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>

「表示列」配列は.ts（TypeScriptファイル）にあり、色は列または配列の要素です（この例のように）。これらの行テンプレートは、cdkColumnDefに指定された名前を見て、レンダリングする特定の列を見つけます。 cdkRowDefは行コンテキストもエクスポートします。行のレンダリングされたコンテンツは、行テンプレートではなくセルテンプレートから取得されます。詳細については、Angularをご覧ください

必要な列を動的に生成する方法の説明material.angular.ioを編集しますか？

<ng-container *ngFor="let col of displayedColumns" cdkColumnDef= {{col}}>
<md-header-cell *cdkHeaderCellDef md-sort-header > {{ col }} </md-header-
cell>
 <md-cell  *cdkCellDef="let row"> {{row[col]}} </md-cell>
</ng-container>

このコードを最後の.hereの前のコードと比較して、displayedColumns配列をループ処理し、プロセスで列名が割り当てられます。したがって、HTMLファイルですべての必要な列を定義する代わりに、配列をループする必要な列を生成します。これで、この説明を締めくくります。mdテーブルは、ページネーション、ソート、フィルタリングなどの機能をさらに提供します。公式ドキュメントには、これらの機能をmdテーブルに追加するために参照できる例が含まれています。

これで、mdテーブルの背後で何が起こるかがわかりました。

Answer 4

このアプローチを使用しようとすると、多くの問題が発生しました。

import { DataSource } from '@angular/cdk/collections';

....

テーブルは取得できましたが、並べ替えはDatasourceなどの既知のプロパティではなかったため、列を並べ替えることはできませんでした。

最後に、"@angular/material": "^5.0.0-rc0"を使用していることに気付きました。

現在、私はMatTableDataSourceで作業しています

インポート

import {MatTableDataSource} from '@angular/material';

クラス変数

private ELEMENT_DATA: reportInterface[] = [];
public tbDataSource;
public displayedColumns;

およびconstructor

this.dataService.getReport().subscribe(results => {
if(!results)return;
this.ELEMENT_DATA = results;
this.displayedColumns = [.............];
this.tbDataSource = new MatTableDataSource(this.ELEMENT_DATA);
this.tbDataSource.sort = this.sort;
});

そして、これは私のフィルター関数

applyFilter(filterValue: string) {
this.tbDataSource.filter = filterValue;
}

これは速くて簡単だと思う