Cómo utilizar la tabla de datos material2

Aquí está el código personalizado creado para ver la asistencia, ahora mismo he codificado los datos , puede llamar al servicio en lugar de eso para obtener datos dinámicos.

App.componente.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.componente.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.módulo.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 { }

Aquí hay un artículo escrito por mí.aquí encontrarás todo lo que necesitas saber. https://medium.com/@fnote/md-tables-angular-material-be2c45947955

Tomemos el código pieza por pieza.encontrará el código completo aquí 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';

Importe los paquetes necesarios que necesite. Asegúrese de instalar angular cdk mientras está instalando angular material. Antes de proceder es mejor mencione qué es una fuente de datos qué es un observable y qué es un sujeto de comportamiento y también rxjs.

RXJS es un tema candente en el desarrollo de frond end en estos días .Es una biblioteca javascript para la programación reactiva ( la programación reactiva es solo una forma de construir aplicaciones de software. Esencialmente, su software está construido para" reaccionar " a los cambios que ocurren (como eventos de clic, datos que se obtienen, etc.) utilizando Observables, para que sea más fácil componer código asincrónico o basado en devolución de llamada. cdk se importa porque las tablas md se construyen encima. Las tablas Cdk son la base de las tablas md.

¿Qué es un observable?

La capacidad de los observables para manejar múltiples valores a lo largo del tiempo los convierte en un buen candidato para trabajar con datos en tiempo real, eventos y cualquier tipo de flujo que se pueda imaginar. Observables proporciona un mejor control cuando se trabaja con el flujo de valores de un flujo. Observable es un envoltorio alrededor de una fuente de datos, fuente de datos es un flujo de valores posiblemente emite varios valores a lo largo del tiempo queremos hacer algo cada vez que se produce un nuevo valor. Conectamos observer y observable a través de una suscripción. La suscripción dice que hay alguien escuchando esta corriente de valores. Un observador se suscribe a un Observable. Un Observable emite elementos o envía notificaciones a sus observadores llamando a los métodos de los observadores. observer implementa hasta 3 métodos.son complete (), next () y onerror (). método next() será llamado por el observable cada vez que se emite un nuevo valor.cuando observable lanza un error se invoca el método onerror ().cuando observable se hace y cuando sabe que no habrá más valores nuevos en el futuro, llama al método complete ().

Le recomiendo encarecidamente que siga la serie de academind en youtube sobre la biblioteca RXJS para obtener una comprensión más profunda sobre las capacidades de RXJS, observadores, observables, sujetos, sujetos de comportamiento y suscripciones.

Continuemos con el código

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

Esto es angular regular 4.selector es el nombre con el que terceros se refieren a nuestro componente .y la Url de estilo es la ubicación a la que nuestro / archivo este componente se refiere con fines de estilo y el html básico del componente se encuentra en la url de la plantilla.

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

Aquí primero hacemos una matriz de todas las columnas de nuestra tabla que necesitamos mostrar en el navegador (encabezados de columna ) esta matriz se refiere de nuevo desde el archivo html.

Y además creamos una instancia de ejemplo de clase de base de datos y una instancia de datasource que no lleva datos al principio. Luego, los datos de la base de datos de ejemplo se inyectan a esta fuente de datos para llenarla, ya que inicialmente está vacía Ng onitint es un gancho de ciclo de vida que es llamado por angular para marcar la finalización de la creación del componente.

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

El tenemos 2 matrices .estos llenan nuestra base de datos de ejemplo

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

Aquí tienes una interfaz definida. Las variables mencionadas aquí eventualmente conviértete en las columnas de nuestras tablas.

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

Esta es la base de datos de ejemplo que la fuente de datos utiliza para recuperar datos para la tabla. Solo tiene 2 matrices definidas, pero de hecho 4 columnas para mostrar. Puede llenar 2 columnas de los datos en los arrays, pero los datos de las otras 2 columnas aquí deben generarse dentro de esta clase.

Entonces, ¿qué es un tema? Observable no puede emitir valores por sí mismo, pero queremos ser capaces de hacerlo nosotros mismos .pero si necesitamos emitir nuevos valores a nosotros mismos tenemos que ir con un tema. Subject es un observable que hereda de observable pero podemos llamar al método next() manualmente haciendo que podamos desencadenar una emisión de un nuevo valor. Por lo tanto el sujeto es un observable activo. Es un observador además de ser un observable por lo que también puede enviar valores a un sujeto además de suscribirse a él.

¿Qué es un sujeto de comportamiento? El sujeto de comportamiento es un tipo especial de sujeto, pero tiene un valor inicial a diferencia de los sujetos. Necesita un valor inicial, ya que siempre debe devolver un valor en la suscripción, incluso si no ha recibido un siguiente() Rx.tema() la suscripción no obtendrá nada inicialmente Rx.behaviorsubject('a') suscripción obtener ' a ' inicialmente

No se preocupe por el código escrito con const name have tenemos alrededor de 20 nombres en la matriz de nombres, pero necesitamos 100 distintos names.So aquí cambiamos sus iniciales en un patrón aleatorio.

También se calcula el progreso aleatoriamente.

Data change es una variable de tipo behavior subject.

this.dataChange.next(copiedData); 

..cada vez que un nuevo usuario es empujado a la matriz que datachange se notifica a los suscriptores. Datachange es una especie de flujo que emite cada vez que los datos se han modificado. Hacer una variable llamada datachange que es un sujeto de comportamiento que tiene una matriz de valores iniciales Hacer un array llamado copied data Crea un nuevo usuario con 4 propiedades. Los usuarios se crean como objetos aquí con estos 4 propiedades siendo sus atributos. Llame al siguiente método con el nuevo usuario agregado Llame al siguiente método en el observable especial y el sujeto emite.add user() agrega un usuario a la base de datos mientras que el método create user construye un objeto user con 4 atributos distintos. Fuente de datos para proporcionar qué datos se deben representar en la tabla. Tenga en cuenta que la fuente de datos puede recuperar sus datos de cualquier manera. En este caso, la fuente de datos se proporciona una referencia a una base de datos común, ExampleDatabase. Toma solo de fuente de datos los datos y enviar la tabla exactamente lo que se debe representar, nada más.

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

Conexión de la tabla a la fuente de datos

Los datos se proporcionan a la tabla a través de una fuente de datos.

La función Connect conecta un visor de colecciones, como una tabla de datos, a una fuente de datos. La función Connect es llamada por la tabla para obtener el flujo que contiene los datos que se deben representar. Se deben dar parámetros a esta función connect. Cuando la tabla recibe un dato fuente, llama a la función connect de la fuente de datos que devuelve un observable que emite una matriz de datos. Siempre que la fuente de datos emita datos a esta secuencia, la tabla se actualizará. Debido a que la fuente de datos proporciona este flujo, tiene la responsabilidad de activar las actualizaciones de la tabla. Esto puede basarse en cualquier cosa: conexiones de sockets web, interacción del usuario, actualizaciones del modelo, intervalos basados en el tiempo, etc. Más comúnmente, las actualizaciones se activarán por las interacciones del usuario, como la clasificación y paginación. La función Disconnect interrumpe la conexión entre la tabla y el origen de datos. Veamos el archivo HTML o nuestra plantilla. Plantillas de celda

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

En primer lugar se definen las columnas de la tabla.con la directiva cdkColumnDef cada columna recibe un nombre.este es el nombre desde el que esta columna en particular de la tabla se refiere desde otros lugares.cada columna luego pasa a definir una plantilla de celda de encabezado y una plantilla de celda de datos.la celda de encabezado proporciona y muestra el nombre de la la plantilla de columna y celda recupera los datos que deben mostrarse y los muestra debajo del encabezado en filas. cdkCellDef exporta contexto de fila la fila del encabezado de las tablas y la fila de datos se definen a continuación Las plantillas de fila se dan a continuación,

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

' Columnas mostradas ' array está en su.ts (archivo typescript) y color es una columna o un elemento de la matriz (según nuestro ejemplo). Estas plantillas de fila miran el nombre dado al cdkColumnDef y encuentran las columnas específicas para renderizar. El cdkRowDef también exporta contexto de fila. El contenido renderizado de la fila proviene de las plantillas de celda, no de las plantillas de fila. Para leer más sobre esto, echa un vistazo a esto Material angular

Editar descripción material.angular.io ¿cómo generar columnas requeridas dinámicamente ?

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

Compare este fragmento de código con el anterior al anterior .aquí hacemos un bucle a través de la matriz displayedColumns y los nombres de columna se asignan en el proceso, por lo tanto, generamos columnas necesarias que se array en lugar de definir todas las columnas necesarias a mano en el archivo HTML. Con esto concluiré esta explicación, md tables le ofrece además características como paginación, clasificación y filtrado. La documentación oficial incluye ejemplos a los que puede consultar para agregar estas características a su tabla md.

Ahora ya sabes lo que sucede detrás de escena en una mesa de md.

Tuve muchos problemas tratando de usar este enfoque:

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

....

Pude obtener la tabla, pero ordenar las columnas era imposible porque sort no era una propiedad conocida de Datasource, etc, etc

Finalmente noté que estaba usando "@angular/material": "^5.0.0-rc0",

Actual, y estoy trabajando con MatTableDataSource

IMPORTACIONES

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

VARIABLES DE CLASE

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

Y en el 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;
});

Y aquí está mi filtro function

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

Creo que esto es más rápido y más fácil