Comment utiliser le tableau de données material2

voici le code personnalisé créé pour la fréquentation de la vue , en ce moment j'ai codé dur les données, vous pouvez appeler le service au lieu de cela pour obtenir des données dynamiques.

app.composant.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.composant.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 { }

Voici un article écrit par moi.vous trouverez tout ce que vous devez savoir ici. https://medium.com/@fnote/md-tables-angular-material-be2c45947955

prenons le code morceau par morceau.vous trouverez le code complet ici 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';

importer les paquets nécessaires dont vous avez besoin. Assurez-vous d'installer le CDK angulaire pendant que vous installez le matériel angulaire. Avant en procédant, il est préférable de mentionner ce qui est une source de données ce qui est un observable et ce qui est un sujet de comportement et aussi rxjs.

RXJS is a hot topic in frond end development these days .C'est une bibliothèque javascript pour la programmation réactive ( la programmation réactive est juste un moyen de construire des applications logicielles. Essentiellement, votre logiciel est construit pour "réagir" aux changements qui se produisent (comme les événements de clic, les données étant récupérées, etc) en utilisant des Observables, pour le rendre plus facile à composer code asynchrone ou basé sur le rappel. cdk est importé parce que md-tables sont construits sur elle. Les tables Cdk sont à la base des tables md.

Qu'est-ce qu'un observable?

la capacité des observables à gérer des valeurs multiples au fil du temps en fait un bon candidat pour travailler avec des données en temps réel, des événements et tout type de flux auquel vous pouvez penser. Observables donne un meilleur contrôle lors du travail avec In-flow des valeurs d'un flux. Observable is un wrapper autour d'une source de données , la source de données est un flux de valeurs peut-être émet de multiples valeurs au fil du temps nous voulons faire quelque chose chaque fois qu'une nouvelle valeur se produit. Nous nous connectons observateur et observables par le biais d'un abonnement. L'abonnement dit qu'il y a quelqu'un qui écoute ce flot de valeurs. Un observateur souscrit à un Observable. Un Observable émet des articles ou envoie des notifications à ses observateurs en appelant les méthodes des observateurs. observateur met en œuvre jusqu'à 3 méthodes.ils sont complets (), suivant() et onerror(). la méthode next() sera appelée par l'observable chaque fois qu'une nouvelle valeur est émise.chaque fois que observable lance une erreur la méthode onerror() est invoquée.quand observable est fait et quand il sait qu'il n'y aura plus de nouvelles valeurs dans le futur il appelle la méthode complete ().

je vous recommande fortement de suivre la série en academind sur youtube RXJS bibliothèque pour obtenir une compréhension plus profonde sur RXJS capacités, les observateurs, les observables, les sujets, le comportement des sujets et des abonnement.

continuons avec le code

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

c'est l'angle régulier 4.selector est le nom par lequel les parties externes se réfèrent à notre composant .et L'Url de style est l'emplacement notre /dossier ce composant se référer pour des fins de style et le html de base du composant se trouve dans l'url de modèle.

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

ici nous faisons d'abord un tableau de toutes les colonnes de notre table que nous devons afficher sur le navigateur (titres des colonnes ) ce tableau est référencé nouveau à partir du fichier html.

et plus loin nous créons une instance de classe exemple de base de données et une instance de datasource qui ne contient pas de données au début. Puis les données dans la base de données exemple sont injectées dans cette source de données pour la remplir car elle est initialement vide Ng onitint est un crochet du cycle de vie qui est appelé par angular afin de marquer l'achèvement de la création du composant.

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

nous avons 2 tableaux .ces remplissez notre exemple la base de données

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

Ici vous avez une interface définie. Les variables mentionnées ici deviendront éventuellement les colonnes de nos tableaux.

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

ceci est la base de données d'exemple que la source de données utilise pour récupérer des données pour la table. Vous n'avez que 2 groupes définis, mais en fait 4 colonnes à afficher. Vous pouvez remplir les 2 colonnes de données dans les tableaux, mais les données pour les 2 autres colonnes doivent être générés à l'intérieur de cette classe.

Donc qu'est ce qu'un objet? Observable ne peut pas émettre de valeurs lui-même, mais nous voulons pouvoir le faire nous-mêmes .mais si nous devons nous-mêmes émettre de nouvelles valeurs, nous devons choisir un sujet. Le sujet est un observable qu'il hérite de observable mais nous pouvons appeler la méthode next() sur lui manuellement faire que nous pouvons déclencher une émission d'une nouvelle valeur. Le sujet est donc un observable actif. C'est un observateur en plus d'être un observable donc vous pouvez aussi envoyer des valeurs à un sujet en plus de vous abonner .

Ce qui dans le monde est un comportement sujet? Comportement sujet est un type particulier d'un sujet, mais il a une valeur initiale contrairement aux sujets. Il a besoin d'une valeur initiale comme il doit toujours retourner une valeur sur abonnement, même si elle n'a pas reçu une prochaine() Rx.sujet() l'abonnement ne donnera rien au départ Rx.behaviorsubject ('a’) abonnement d'obtenir " une " d'abord

ne vous inquiétez pas pour le code écrit avec le nom de const...nous avons environ 20 noms dans le tableau des noms mais nous avons besoin de 100 noms distincts.Donc ici nous changeons leurs initiales dans un modèle aléatoire.

le progrès est aussi calculé au hasard.

le changement de données est une variable de type behavior subject.

this.dataChange.next(copiedData); 

..chaque fois qu'un nouvel utilisateur est poussé dans le tableau qui datachange est notifiée à l'abonné. Datachange est une sorte de flux qui émet chaque fois que les données ont été modifiées. Créer une variable appelée datachange qui est une sujet de comportement qui a un tableau de valeurs initiales Faire un tableau appelé données copiées Créer un nouvel utilisateur avec 4 propriétés. Les utilisateurs sont créés comme des objets ici avec ces 4 propriétés étant leurs attributs. Appeler la méthode suivante avec le nouvel utilisateur ajouté Appeler la méthode suivante sur les observables et l'objet émet.add user () ajoute un utilisateur à la base de données tandis que create user method construit un objet utilisateur avec 4 attributs distincts. Source des données indiquer les données qui devraient être présentées dans le tableau. Notez que la source de données peut récupérer ses données. Dans ce cas, la source de données est une référence à une base de données commune, ExampleDatabase. Datasource ne prend que les données et envoie la table exactement ce qui doit être rendu, rien d'autre.

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

Connexion de la table de source de données

les données sont fournies à la table par L'intermédiaire d'une source de données.

fonction de connexion relie une collection spectateur comme une table de données à une source de données. Connecter les fonction est appelée par le tableau pour obtenir le flux contenant les données qui doivent être rendus. Paramètres doit être donnée à cette fonction de connexion. Lorsque la table reçoit une source de données, elle appelle la fonction connect de la source de données qui renvoie un observable qui émet un tableau de données. Chaque fois que la source de données émet des données vers ce flux, la table sera mise à jour. Comme la source de données fournit ce flux, elle a la responsabilité de déclencher les mises à jour des tableaux. Cela peut être basé sur n'importe quoi: les connexions de socket web, l'interaction d'utilisateur, les mises à jour de modèle, intervalles basés sur le temps, etc. Le plus souvent, les mises à jour seront déclenchées par des interactions utilisateur comme le tri et la pagination. La fonction Déconnexion rompt la connexion entre la table et la source de données. Regardons le fichier HTML ou notre modèle. Modèles de cellules

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

les premières colonnes du tableau sont définies.avec la directive cdkColumnDef chaque colonne reçoit un nom.c'est le nom de ce qui la colonne particulière du tableau est indiquée à partir d'autres endroits.chaque colonne définit ensuite un modèle de cellule d'en-tête et un modèle de cellule de données.la cellule d'en-tête fournit et affiche le nom de la colonne et le modèle de la cellule récupère les données qui devraient être affichées et les affiche sous l'en-tête dans les lignes. cdkCellDef exportations contexte de ligne la ligne d'en-tête des tableaux et la ligne de données sont définies ci-dessous Les Modèles de lignes sont donnés ci-dessous,

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

le tableau’ displayed columns ' est dans votre .ts (tapuscrit fichier) et la couleur est d'une colonne ou d'un élément du tableau (pour notre exemple). Ces modèles de lignes examinent le nom donné au cdkColumnDef et trouvent les colonnes spécifiques à afficher. Le cdkRowDef exporte également le contexte row. Le contenu rendu de la rangée provient des modèles de cellules et non des modèles de rangée. Pour en savoir plus sur cette check this out Matériau Angulaire

modifier la description matériel.anguleux.io comment générer dynamiquement les colonnes requises ?

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

comparez ce morceau de code avec celui d'avant le dernier .ici, nous faisons une boucle à travers le tableau displayedColumns et les noms de colonnes sont assignés dans le processus, donc nous générons les colonnes requises en boucle à travers le tableau au lieu de définir toutes les colonnes requises à la main dans le fichier HTML. Avec ceci je conclurai cette explication, md tables vous offre d'autres fonctionnalités comme la pagination, le tri et le filtrage. La documentation officielle comprend des exemples que vous pouvez référer afin d'ajouter ces fonctionnalités à votre rapport de tableau.

Maintenant vous savez ce qui se passe dans les coulisses d'une table md.

j'ai eu beaucoup de problèmes en essayant d'utiliser cette méthode:

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

....

je pouvais obtenir la table, mais trier les colonnes était impossible parce que sort n'était pas une propriété connue de Datasource, etc, etc

finalement j'ai noté que j'utilisais "@angular/material": "^5.0.0-rc0",

Courant, y je travaille avec MatTableDataSource

importations

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

VARIABLES DE CLASSE

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

et dans le constructeur

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

et voici mon fonction de filtre

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

je pense que c'est plus rapide et plus facile