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

举报
汪子熙 发表于 2023/10/01 09:21:46 2023/10/01
【摘要】 看下列这段出现在 Angular Component 内的代码:protected userCostCenters$: Observable<CostCenter[]> = this.userCostCenterService .getActiveCostCenters() .pipe(filter((costCenters) => !!costCenters));...

看下列这段出现在 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的双重感叹号运算符,它用于将一个值强制转换为布尔值。双重感叹号的作用是将非布尔值转换为布尔值,同时确保不会返回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: `
    <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发送到模板中。双重感叹号(!!)用于将值强制转换为布尔值,同时排除nullundefined,确保只有非空数组通过过滤。这有助于确保模板只在有有效数据可用时显示内容,提高了应用的可靠性和用户体验。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。