Créer et utiliser le canal OrderBy

Apprenez à utiliser le tube orderBy pour manipuler les données dans les modèles afin de les afficher dans le format souhaité.

Angular est un framework basé sur des composants qui nous permet de créer des interfaces Web interactives pour les utilisateurs en composant des composants ensemble. En plus des composants, nous pouvons créer des canaux qui nous permettent de manipuler des données dans des modèles pour les afficher dans le format souhaité.

Dans cet article, nous verrons comment ajouter un canal orderBy dans notre application et l’utiliser dans notre modèle.

Notions de base sur les tuyaux

Nous pouvons créer nos propres tuyaux pour transformer les données dans nos modèles avant de les afficher.

Pour créer les fichiers du tuyau et enregistrer le tuyau dans notre module d’application angulaire, nous utilisons le ng g commande fournie avec Angular CLI.

Dans cet exemple, nous allons créer un tube qui convertit les chaînes en minuscules avant de les afficher.

Pour commencer, nous exécutons :

ng generate pipe lowerCase

pour créer le lowerCase tuyau.

Cela créera les fichiers et les enregistrera dans le module d’application Angular afin que nous puissions apporter des modifications au fichier pipe et l’utiliser immédiatement.

Dans app.module.tsnous devrions voir quelque chose comme :

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { LowerCasePipe } from "./lower-case.pipe";

@NgModule({
  declarations: [AppComponent, LowerCasePipe],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Si nous voyons LowerCasePipe dans declarationscela signifie que nous pouvons l’utiliser dans notre modèle dans les composants enregistrés dans AppModule.

Nous devrions avoir le lower-case.pipe.ts dossier dans le app dossier après avoir exécuté la commande. Dans celui-ci, nous écrivons :

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "lowerCase",
})
export class LowerCasePipe implements PipeTransform {
  transform(value: string, ...args: unknown[]): unknown {
    return value.toLowerCase();
  }
}

Nous avons ajouté le transform méthode dans le LowerCasePipe classe. Il met en œuvre la PipeTransform Interface TypeScript, qui nécessite la transform méthode à inclure.

Le transform méthode prend la value, qui est la valeur transmise du modèle au canal. Nous définissons son type sur une chaîne puisque nous nous attendons à ce qu’un argument de chaîne soit transmis.

Il renvoie le résultat que nous voulons rendre dans le modèle. Dans ce cas, nous voulons afficher la chaîne en minuscules. Par conséquent, nous renvoyons la version minuscule de value en appelant toLowerCase.

Puis dans app.component.htmlon peut utiliser le lowerCase tuyau que nous venons de créer.

Dans app.component.htmlnous écrivons:

<p>{{ "HELLO WORLD" | lowerCase }}</p>

pour rendre le "HELLO WORLD" chaîne en minuscules en appliquant la lowerCase nous venons de créer.

Nous utilisons le name valeur de la propriété dans l’objet que nous avons appelé le Pipe décorateur avec comme nom de canal dans le modèle.

Créer un canal pour trier les éléments affichés dans les modèles

Les canaux peuvent être appliqués à des valeurs autres que des chaînes. Nous pouvons appliquer des tuyaux à tout type de valeur.

Une sorte de chose que nous faisons couramment est de trier les éléments d’un tableau avant de les afficher. Pour ce faire, nous pouvons créer un tuyau. Les tubes peuvent prendre des arguments, nous pouvons donc trier les éléments du tableau comme nous le souhaitons avant d’afficher les éléments.

Pour créer un tube capable de trier les tableaux avant d’afficher les éléments, nous utilisons le tableau JavaScript sort méthode. Le sort La méthode prend une fonction qui compare les deux éléments en cours d’itération comme arguments. sort fait une copie du tableau appelé, trie le tableau copié, puis renvoie le tableau copié trié.

On peut appeler ces deux paramètres a et b.

Par exemple, nous écrivons :

const sorted = array.sort((a, b) => {
  
});

appeler sort sur le array tableau avec une fonction qui prend des éléments a et b et les compare.

a et b sont des éléments dans array tableau que nous comparons.

Si l’on compare la a et b éléments et renvoie un nombre supérieur à 0 dans le sort rappel, puis nous trions a après b.

Si nous les comparons et renvoyons un nombre inférieur à 0 dans le sort rappel, puis nous trions a avant b.

Et si on retourne 0 dans le sort callback, alors nous gardons l’ordre original de a et b.

Par exemple, si nous écrivons :

const array = [1, 5, 4, 2, 3];
const sorted = array.sort((a, b) => {
  return a - b;
});
console.log(sorted);

Alors sorted est [1, 2, 3, 4, 5] depuis que nous commandons a avant b si a est inférieur à b.

Et si nous écrivons :

const array = [1, 5, 4, 2, 3];
const sorted = array.sort((a, b) => {
  return b - a;
});
console.log(sorted);

Alors sorted est [5, 4, 3, 2, 1] depuis que nous commandons b avant a si b est plus grand que a.

Et si nous écrivons :

const array = [1, 5, 4, 2, 3];
const sorted = array.sort((a, b) => {
  return 0;
});
console.log(sorted);

Alors sorted est [1, 5, 4, 2, 3] puisque nous gardons le même ordre que le tableau.

Avec ces informations, nous pouvons créer un tube qui ordonne les valeurs souhaitées.

Pour commencer, nous créons le orderBy tuyau en exécutant :

ng generate pipe orderBy

Puis dans app.module.tsnous voyons quelque chose comme :

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { OrderByPipe } from "./order-by.pipe";

@NgModule({
  declarations: [AppComponent, OrderByPipe],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Le OrderByPipe est dans le tableau que nous avons défini comme la valeur de la declarations propriété, il est donc enregistré dans le AppModule.

Le order-by.pipe.ts fichier doit être créé. Et nous pouvons modifier cela pour trier les valeurs que nous voulons avant de les afficher.

Ensuite, nous créons le Person interface puisque nous voulons que notre tube trie ces objets. Pour créer le person.ts fichier, nous exécutons:

ng generate interface Person

Dans celui-ci, nous écrivons :

export interface Person {
  name: string;
  age: number;
}

pour ajouter le name et age properties dans notre interface TypeScript.

Maintenant, nous pouvons travailler sur notre tuyau.

Dans order-by.pipe.tsnous écrivons:

import { Pipe, PipeTransform } from "@angular/core";
import { Person } from "./person";

@Pipe({
  name: "orderBy",
})
export class OrderByPipe implements PipeTransform {
  transform(value: Person[], order: "asc" | "desc" = "asc"): Person[] {
    return value.sort((a, b) => {
      if (order === "asc") {
        return a.age - b.age;
      } else if (order === "desc") {
        return b.age - a.age;
      }
      return 0;
    });
  }
}

pour ajouter le transform méthode.

Il faut le value paramètre, qui est un tableau de Person objets. Person est l’interface que nous avons créée précédemment.

order est un argument pour le tube qui nous permet de spécifier s’il faut trier par asc (ordre croissant) ou desc (Ordre décroissant). Dans celui-ci, nous appelons
value.sort avec un rappel qui vérifie le order direction.

Si c’est ascpuis on trie par age Dans l’ordre croissant. Si c’est descpuis on trie par age par ordre décroissant.

Sinon, nous renvoyons le tableau avec les mêmes éléments que value dans le même ordre.

Nous fixons le type de value pour Person[] donc seulement un tableau de Person les objets sont acceptés.

order a le genre "asc" | "desc" avec la valeur par défaut étant "asc" donc seulement "asc" ou "desc" peuvent être des valeurs de
order.

Et le type de retour du transform la méthode est Person[] depuis sort retourne un tableau avec les objets dans value trié. Nous avons besoin des types pour éviter les erreurs de type TypeScript.

Ensuite, nous pouvons ajouter quelques Person objets dans AppComponent et affichez-les de manière triée. Pour ce faire, nous écrivons :

import { Component } from "@angular/core";
import { Person } from "./person";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  persons: Person[] = [
    { name: "Joe", age: 50 },
    { name: "Jane", age: 10 },
    { name: "Mary", age: 30 },
    { name: "Alex", age: 23 },
    { name: "Steve", age: 68 },
    { name: "Paul", age: 91 },
  ];
  orderBy: "asc" | "desc" = "asc";
}

dans app.component.ts.

Nous avons un éventail de Person objets définis comme la valeur de persons variable d’instance.

Aussi, nous avons le orderBy variable d’instance initialement définie sur "asc".

Puis dans app.component.htmlnous écrivons:

<button (click)="orderBy = orderBy === 'asc' ? 'desc' : 'asc'">
  Toggle Sort
</button>
<ul>
  <li *ngFor="let p of persons | orderBy: orderBy">
    {{ p.name }} - {{ p.age }}
  </li>
</ul>

pour ajouter un bouton qui nous permet de basculer la valeur de orderBy entre "asc" et "desc".

Et puis nous rendons les éléments dans persons après avoir été triés par le orderBy tuyau que nous venons de créer.

Le orderBy après le côlon est le orderBy variable d’instance dans AppComponent que nous posons comme argument de la orderBy tuyau.

En conséquence, nous devrions voir les éléments affichés dans la liste initialement triés par leur age valeurs dans l’ordre croissant. Ensuite, lorsque nous cliquons sur Basculer le tri, nous voyons l’ordre de tri inversé afin que le age les valeurs sont triées par ordre décroissant.

Conclusion

En plus des composants, nous pouvons créer des tuyaux dans Angular qui nous permettent de manipuler les données dans des modèles pour les afficher dans le format souhaité.

Nous pouvons créer notre propre pipe qui trie les valeurs dans l’ordre que nous voulons avant de les afficher en utilisant le tableau sort méthode. Le sort La méthode fait une copie du tableau, le trie, puis renvoie le tableau trié afin que le tableau d’origine ne soit pas affecté.