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

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

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

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

1. Observable 和 RxJS

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

2. Observable<CostCenter[]>

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

3. .pipe()

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

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

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

• (costCenters)：这是回调函数的参数，表示Observable发出的值，即CostCenter数组。
• !!costCenters：这是对costCenters的双重感叹号运算符，它用于将一个值强制转换为布尔值。双重感叹号的作用是将非布尔值转换为布尔值，同时确保不会返回null或undefined。如果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: `
    <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));
  }
}

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

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

总结

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