Comment utiliser material2 tableau de données

Le code à partir de votre exemple est la définition d'un générique de table, à l'aide de la nouvelle cdk composant dans le material2 spécification.
vous devez garder à l'esprit la md-table est le visuel de la mise en œuvre de la cdk-table, de sorte que vous besoin de déclarer une cdk avec un modèle compatible avec le md-modèle en HTML.

Par exemple:

Je déclare un cdk-table avec la mise en œuvre suivants:

1. Tout d'abord, les dépendances:

La nouvelle CDK composant dans Material2, à l'aide de:

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. Définition de la structure de l'HTML dans TS:

De définir une displayedColumns tableau, les éléments sont les colonnes de mon tableau HTML, dans l'ordre:

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

Une base de données de type ExampleDatabase (un objet avec une définition manuelle particulier):

exampleDatabase = new ExampleDatabase();

Enfin, je déclare une dataSource, c'est l'origine de mes données. C'est un objet avec une définition manuelle de données ou la valeur null.

dataSource: ExampleDataSource | null;

Dans le ngOnInit() méthode, je déclare simplement que mon dataSource est une nouvelle ExampleDataSource avec le paramètre mon exampleDataBase.

Bon, maintenant, pour mettre en place le reste du code:

D'abord, déclarer une interface pour le DataBase. C'est très important pour le maintien de la cohérence des données, la base de données doit respecter un régime défini.
Dans cet exemple, la base de données comporte trois colonnes: id, le nom et le progrès:

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

Le point suivant est de créer une classe (Objet) ExampleDatabase avec la définition des données dans mon DataBase. Vous pouvez créer un service pour la connexion à une base de données (PostgreSQL, MongoDB), obtenir les données réelles et de créer les objets de la cdk-datatable dans une autre méthode, cependant, dans cet exemple, nous utilisons une base de données de la mémoire émulée au moment de l'exécution.

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

Bon, finalement, j'ai créer une seconde classe avec la définition de mon DataSource.

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

Cette méthode assure que les données sont dans le bon format, et les communiqués de la "connexion" à la DataBase (dans la mémoire) pour obtenir les données qu'il contient.

Enfin, l'utilisation de la md-table composant ou cdk-table composant dans le code HTML. Le md-table composant utilise le matériel de conception de style, et le cdk-table utilise un style générique..

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>

Le reste de mises en œuvre, la recherche, les menus, cases à cocher, etc, est de votre responsabilité de mettre en œuvre la logique de la manipulation de l'information.

Utiliser la documentation à propos de cdk-tableau pour plus de détails:

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

Résultat:

Me faire du sabre et de la réalisation, j'ai compris mon explication, et je m'excuse pour mon anglais. Je suis en train d'apprendre.

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

permet de prendre 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 angulaire cdk lors de l'installation angulaire du matériel.
Avant de procéder, il est préférable de mentionner ce qui est une source de données de ce qui est observable et ce qui est un comportement soumis et aussi rxjs.

RXJS est un sujet chaud en frond de développement de ces jours .C'est une bibliothèque javascript pour la programmation réactive ( Reactive programming est juste une façon de construire des applications logicielles. Essentiellement, votre logiciel est construit à “réagir” aux changements qui se produisent (comme sur les événements, les données extraites, etc)) à l'aide d'Observables, pour le rendre plus facile à composer asynchrone ou de rappel à base de code.
cdk est importé, car md-tables sont construites au-dessus d'elle. Cdk tables sont à la base du rapport de tables.

Ce qui est observable?

La capacité des observables être en mesure de gérer plusieurs valeurs au fil du temps en fait un bon candidat pour travailler avec des données en temps réel, les événements et tout type de flux que vous pouvez penser.
Observables donne un meilleur contrôle lorsque vous travaillez avec les flux de valeurs à partir d'un flux.
Observable est un wrapper autour d'une source de données source de données est un flux de valeurs éventuellement émet plusieurs valeurs au fil du temps, nous voulons faire quelque chose chaque fois qu'une nouvelle valeur apparaît.
Nous nous connectons observateur et observables par le biais d'un abonnement. Abonnement dit qu'il y a quelqu'un à l'écoute, ces flux de valeurs.
Un observateur s'abonne à un fait Observable. Une Observable émet des éléments ou envoie des notifications à ses observateurs en appelant les observateurs de méthodes.
observateur met en œuvre jusqu'à 3 méthodes.ils sont complets() ,next() et onerror().
la méthode next() sera appelé par le observables à chaque fois qu'une nouvelle valeur est émise.chaque fois que observables déclenche une erreur onerror() la méthode est invoquée.lorsque observable est fait et quand il sait qu'il ne sera pas plus de nouvelles valeurs dans l'avenir, il appelle complète (les) méthode.

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

Continuons avec le code

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

C'est régulier angulaire 4.sélecteur est le nom par lequel des parties de l'extérieur reportez-vous à notre composant .et le style d'Url est l'emplacement de notre fichier /ce composant se référer pour le style de fins et html de base du composant se trouve dans le modèle d'url.

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

Ici, nous avons d'abord faire un tableau de toutes les colonnes de notre tableau nous avons besoin de l'afficher sur le navigateur (en-têtes de colonne ) ce tableau est appelé de nouveau à partir du fichier html.

Et plus loin, nous créons une instance de base de données d'exemple de classe et une instance de la source de données qui comporte pas de données au début.
Ensuite les données dans la base de données d'exemple est injecté à cette source de données pour le remplir comme il est initialement vide
Ng onitint est un cycle de vie de crochet qui est appelé par angulaire 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'];

La nous avons 2 tableaux .ces remplissez notre exemple de 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 par la suite dans les colonnes de nos tables.

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

C'est l'exemple de base de données la source de données utilise pour récupérer les données de 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?
Observables ne peuvent pas émettre des valeurs de lui-même, mais nous voulons être en mesure de le faire nous-mêmes .mais si nous avons besoin d'émettre de nouvelles valeurs nous-mêmes, nous devons aller avec un sujet. L'objet est un fait observable, il hérite d'observables, mais nous pouvons appeler la méthode next() sur manuellement faire cela, nous pouvons déclencher une d'émettre une nouvelle valeur. Par conséquent, l'objet est actif observables. Il est un observateur en plus d'être un observables, de sorte que vous pouvez également envoyer les valeurs d'un objet en plus de l'abonnement à elle.

Ce qui dans le monde est un comportement sujet?
Le comportement de l'objet est un type spécial d'un sujet, mais il a une valeur initiale à la différence des 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 un next()
Rx.sujet()
l'abonnement ne sera pas obtenir quoi que ce soit d'abord
Rx.behaviorsubject(‘a’)
abonnement d'obtenir " une " d'abord

Ne vous inquiétez pas le code écrit avec const nom...nous avons environ 20 noms dans les noms de tableau mais nous avons besoin de 100 noms distincts.Donc, ici nous changer leurs initiales dans un motif aléatoire.

Progrès est également calculé de façon aléatoire.

De modification des données d'une variable de type comportement de l'objet.

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.
Faire une variable appelée datachange qui est un comportement sujet 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 de leurs attributs.
Appeler la méthode suivante avec le nouvel utilisateur ajouté
Appeler la méthode suivante sur les observables et l'objet émet.ajout d'un utilisateur() ajoute un utilisateur à la base de données tout créer de la méthode crée un objet utilisateur avec 4 attributs distincts.
Source de données pour fournir ce que les données doivent être affichées dans la table. Notez que la source de données peut récupérer ses données. Dans ce cas, la source de données est fourni une référence à une base de données commune, ExampleDatabase. Source de données uniquement prendre les données et envoyer le tableau 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() {}
}

La connexion de la table de source de données

Données sont fournies à la table au moyen 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 d'une source de données, il appelle la source de données de connexion de fonction qui retourne une observable qui émet un tableau de données.
Chaque fois que la source de données émet les données de ce flux, la table sera mise à jour.
Parce que la source de données fournit ce flux, il est de la responsabilité du déclenchement de la table des mises à jour. Cela peut être basée sur quelque chose: web connexions socket, l'interaction de l'utilisateur, le modèle des mises à jour, en fonction du temps d'intervalle, etc. Le plus souvent, les mises à jour seront déclenchées par des interactions de l'utilisateur comme le tri et la pagination.
Débranchez la fonction rompt le lien entre la table et la source de données.
Permet de regarder le fichier HTML ou de notre modèle.
Modèles cellulaires

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

Tout d'abord les colonnes de la table sont définis.avec la directive cdkColumnDef chaque colonne est donné un nom.c'est le nom de qui cette colonne dans la table est appelée à partir d'autres endroits.chaque colonne va ensuite à définir un en-tête de la cellule de modèle et d'une cellule de données modèle.cellule d'en-tête fournit et affiche le nom de la colonne et de la cellule modèle récupère les données qui doivent être affichées et les affiche en dessous de l'en-tête de lignes.
cdkCellDef exportations contexte de ligne
les tables de ligne d'en-tête et la ligne de données sont définis ci-dessous
Ligne Modèles sont donnés ci-dessous,

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

‘Affiche des colonnes de la matrice est dans votre .ts (tapuscrit de fichier) et la couleur est d'une colonne ou d'un élément du tableau (comme pour notre exemple).
Ces ligne des modèles de regarde le nom donné à la cdkColumnDef et trouve les colonnes à afficher.
Le cdkRowDef exporte également du contexte de ligne. Rendu du contenu de la ligne vient de la cellule modèles non à partir de la ligne de modèles.
Pour en savoir plus sur cette check this out
Angulaire Matériel

Modifier la description
matériau de.angulaire.io
comment créer des Colonnes dynamiquement ?

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

comparer ce morceau de code avec celle d'avant la dernière .ici, nous bouclons la displayedColumns tableau et les noms de colonne sont affectées dans le processus, nous avons donc de créer des colonnes de boucle dans le tableau au lieu de définir toutes les colonnes requises par la main dans le fichier HTML.
Avec cela, je vais conclure cette explication, md tables plus vous offre des fonctionnalités comme la pagination, tri et le filtrage. La documentation officielle comprend des exemples que vous pouvez consulter afin d'ajouter ces fonctionnalités à votre rapport de tableau.

Maintenant, vous savez ce qui se passe derrière les scènes dans un rapport de tableau.