如何在Angular中用RxJS将数组对象的布尔值转为Yes/No？

嘿，这事儿其实挺简单的，用RxJS的map操作符就能轻松搞定——你不需要新增字段，直接修改每个对象里的active值就行，我给你一步步拆解：

首先在你的数据服务（比如CustomerService）里，获取Firebase数据的Observable时，通过map遍历每个客户对象，把布尔类型的active替换成对应的文本：

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 定义客户接口，允许active是布尔值或字符串（转换后）
interface Customer {
  customer: string;
  active: boolean | string;
}

@Injectable({ providedIn: 'root' })
export class CustomerService {
  constructor(private firestore: AngularFirestore) {}

  getCustomers(): Observable<Customer[]> {
    return this.firestore.collection<Customer>('customers').valueChanges().pipe(
      map(customers => {
        // 遍历数组里的每个客户，转换active字段
        return customers.map(customer => ({
          ...customer, // 保留原对象所有属性
          active: customer.active ? 'Yes' : 'No' // 替换布尔值为文本
        }));
      })
    );
  }
}

组件中订阅处理后的数据 #

在你的组件里注入服务，订阅数据并保存到组件属性：

import { Component, OnInit } from '@angular/core';
import { CustomerService } from './customer.service';
import { Customer } from './customer.service';

@Component({
  selector: 'app-customer-list',
  templateUrl: './customer-list.component.html'
})
export class CustomerListComponent implements OnInit {
  customers: Customer[] = [];

  constructor(private customerService: CustomerService) {}

  ngOnInit(): void {
    this.customerService.getCustomers().subscribe(customers => {
      this.customers = customers;
    });
  }
}

模板里渲染表格 #

最后在组件模板里直接用处理好的active值渲染就可以了：

<table>
  <thead>
    <tr>
      <th>Customer Name</th>
      <th>Active</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let customer of customers">
      <td>{{ customer.customer }}</td>
      <td>{{ customer.active }}</td>
    </tr>
  </tbody>
</table>

小提示 #

• 用扩展运算符...customer是为了保留原对象的所有其他属性（如果有的话），避免只返回修改后的active和customer字段。
• 如果你只是想在模板显示时转换，不想修改原对象的类型，也可以直接在模板里写{{ customer.active ? 'Yes' : 'No' }}——但既然你想要在订阅时修改值，上面的方法更贴合你的需求。
• 别忘了导入RxJS的map操作符，不然会出现找不到操作符的错误哦！

内容的提问来源于stack exchange，提问作者Johan Walhout