Acerca del uso de dobles signos de exclamación en el operador de filtro Rxjs en aplicaciones Angular

Mire el siguiente código que aparece en Angular Component:

protected userCostCenters$: Observable<CostCenter[]> =
    this.userCostCenterService
      .getActiveCostCenters()
      .pipe(filter((costCenters) => !!costCenters));

Este código de componente Angular involucra operadores Observables y RxJS, especialmente filteroperadores, y el uso de signos de exclamación dobles (!!). Explicaré paso a paso qué significa este código y proporcionaré ejemplos para entenderlo mejor.

1. Observable y RxJS

En aplicaciones Angular, Observable es parte de la biblioteca RxJS y se utiliza para manejar flujos de datos asincrónicos. Observable representa una serie de valores que pueden cambiar con el tiempo. Normalmente, aplicamos varios operadores a los Observables para filtrar, transformar y manipular estos valores.

2.Observable<CostCenter[]>

Aquí, userCostCenters$es una variable de tipo Observable, que representa una matriz CostCenter ( CostCenter[]). Esto significa que emitirá una matriz CostCenter o estará vacía.

3..pipe()

pipe()es un método de Observable que se utiliza para encadenar operadores para que se apliquen secuencialmente. En este fragmento de código, usaremos filteroperadores para filtrar los valores emitidos por un Observable.

4.filter((costCenters) => !!costCenters)

Esta es una filteraplicación de un operador que acepta una función de devolución de llamada como parámetro. El propósito de esta función de devolución de llamada es filtrar los valores emitidos por el Observable. Analicemos esta función de devolución de llamada:

• (costCenters): Este es el parámetro de la función de devolución de llamada, que representa el valor emitido por el Observable, que es la matriz CostCenter.
• !!costCenters: Este es costCentersel operador de doble signo de exclamación, que se utiliza para convertir un valor en un valor booleano. Lo que hace el doble signo de exclamación es convertir un valor no booleano en un valor booleano garantizando al mismo tiempo que no se devuelva ningún nullOR undefined. Se devolverá un doble signo de exclamación si costCentersse trata de una matriz que no está vacía true; en caso contrario false.

Por lo tanto, filter((costCenters) => !!costCenters)la función es filtrar aquellos valores que no son arreglos CostCenter válidos y solo permitir pasar aquellos arreglos que no estén vacíos.

Ejemplo

Para comprender mejor este código, veamos un ejemplo. Supongamos userCostCenterService.getActiveCostCenters()que es un método de servicio utilizado para obtener el centro de costos de actividad del usuario y devolver un Observable. A continuación se muestra un ejemplo de cómo utilizar este código:

import {
    
     Component } from '@angular/core';
import {
    
     Observable } from 'rxjs';
import {
    
     filter } from 'rxjs/operators';

@Component({
    
    
  selector: 'app-cost-center',
  template: `
    <div *ngIf="userCostCenters$ | async as costCenters; else loading">
      <h2>User Cost Centers:</h2>
      <ul>
        <li *ngFor="let costCenter of costCenters">{
     
     { costCenter.name }}</li>
      </ul>
    </div>
    <ng-template #loading>Loading...</ng-template>
  `,
})
export class CostCenterComponent {
    
    
  userCostCenters$: Observable<CostCenter[]>;

  constructor(private userCostCenterService: UserCostCenterService) {
    
    
    this.userCostCenters$ = this.userCostCenterService
      .getActiveCostCenters()
      .pipe(filter((costCenters) => !!costCenters));
  }
}

En el ejemplo anterior, userCostCenters$es un Observable que getActiveCostCenters()obtiene el centro de costos de actividad del usuario a través de un método. Luego usamos asynctuberías para suscribirnos al Observable en la plantilla y usamos *ngIfdirectivas para mostrar el centro de costos del usuario o cargar mensajes según el valor del Observable.

filter((costCenters) => !!costCenters)Asegúrese de que userCostCenters$los centros de costos del usuario se muestren en la plantilla solo si se incluye una matriz CostCenter válida.

Resumir

El propósito de este código de componente Angular es obtener el centro de costos de actividad del usuario y utilizar filteroperadores para filtrar valores ilegales para garantizar que solo se envíen matrices CostCenter válidas a la plantilla a través de Observable. El doble signo de exclamación (!!) se utiliza para forzar el valor a booleano mientras se excluye nullo undefined, asegurando que solo las matrices no vacías pasen el filtro. Esto ayuda a garantizar que la plantilla solo muestre contenido cuando haya datos válidos disponibles, lo que mejora la confiabilidad de la aplicación y la experiencia del usuario.