关于 Angular 应用里 Rxjs filter 操作符内的双重感叹号的用法

看下列这段出现在 Angular Component 内的代码:

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

这段Angular组件代码涉及到Observable和RxJS操作符,特别是filter操作符,以及双重感叹号(!!)的用法。我将逐步解释这段代码的含义,并提供示例以更好地理解它。

1. Observable 和 RxJS

在Angular应用中,Observable是RxJS库的一部分,用于处理异步数据流。Observable表示一系列的值,可以随时间发生变化。通常,我们会对Observable应用各种操作符来过滤、转换和操作这些值。

2. Observable

这里,userCostCenters$是一个Observable类型的变量,它表示一个CostCenter数组(CostCenter[])。这意味着它将发出一个CostCenter数组或者为空。

3. .pipe()

pipe()是Observable的方法,用于将操作符串联在一起,以便按顺序应用它们。在这个代码片段中,我们将使用filter操作符来过滤Observable发出的值。

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

这是一个filter操作符的应用,它接受一个回调函数作为参数。这个回调函数的目的是过滤Observable发出的值。让我们分解这个回调函数:

  • (costCenters):这是回调函数的参数,表示Observable发出的值,即CostCenter数组。
  • !!costCenters:这是对costCenters的双重感叹号运算符,它用于将一个值强制转换为布尔值。双重感叹号的作用是将非布尔值转换为布尔值,同时确保不会返回nullundefined。如果costCenters是非空的数组,双重感叹号将返回true,否则返回false

因此,filter((costCenters) => !!costCenters)的作用是过滤掉那些不是有效CostCenter数组的值,只允许那些非空数组通过。

示例

为了更好地理解这段代码,让我们来看一个示例。假设userCostCenterService.getActiveCostCenters()是一个服务方法,用于获取用户的活动成本中心,返回一个Observable。以下是一个示例,演示了如何使用这段代码:

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

@Component({
  selector: 'app-cost-center',
  template: `
    

User Cost Centers:

  • {{ costCenter.name }}
Loading... `, }) export class CostCenterComponent { userCostCenters$: Observable; constructor(private userCostCenterService: UserCostCenterService) { this.userCostCenters$ = this.userCostCenterService .getActiveCostCenters() .pipe(filter((costCenters) => !!costCenters)); } }

在上面的示例中,userCostCenters$是一个Observable,它通过getActiveCostCenters()方法获取用户的活动成本中心。然后,我们使用async管道在模板中订阅Observable,并使用*ngIf指令来根据Observable的值来显示用户的成本中心或加载消息。

filter((costCenters) => !!costCenters)确保只有在userCostCenters$包含有效的CostCenter数组时,用户的成本中心才会显示在模板中。

总结

这段Angular组件代码的目的是获取用户的活动成本中心,并使用filter操作符过滤掉非法值,以确保只有有效的CostCenter数组才会通过Observable发送到模板中。双重感叹号(!!)用于将值强制转换为布尔值,同时排除nullundefined,确保只有非空数组通过过滤。这有助于确保模板只在有有效数据可用时显示内容,提高了应用的可靠性和用户体验。

你可能感兴趣的:(关于 Angular 应用里 Rxjs filter 操作符内的双重感叹号的用法)