Angular中获取异步Observable的DEPO变量并格式化账号

步骤1：在online.component.ts中获取currentPortfolio$的DEPO值 #

针对Observable类型的currentPortfolio$，有两种常用方式获取其发射的DEPO值：

方式一：直接订阅Observable

在组件生命周期钩子（如ngOnInit）中订阅，获取值后存入组件变量，可直接调用格式化函数处理：

import { Component, OnInit } from '@angular/core';
import { Portfolio } from './path-to-portfolio.model'; // 替换为你的Portfolio模型路径

@Component({
  selector: 'app-online',
  templateUrl: './online.component.html',
  styleUrls: ['./online.component.css']
})
export class OnlineComponent implements OnInit {
  depoAccount: string | undefined;

  constructor() {}

  ngOnInit(): void {
    this.currentPortfolio$.subscribe((portfolio: Portfolio) => {
      if (portfolio?.DEPO) {
        this.depoAccount = this.formatAccountNumber(portfolio.DEPO);
      }
    });
  }

  // 12位账号格式化函数
  formatAccountNumber(account: string): string {
    if (!account || account.length !== 12) return account;
    const part1 = account.slice(0, 3);
    const part2 = account.slice(3, 10);
    const part3 = account.slice(10);
    return `${part1}-${part2}-${part3}`;
  }
}

方式二：使用firstValueFrom（Angular 12+推荐）

如果currentPortfolio$仅发射一次值，可结合async/await简化代码：

import { Component, OnInit } from '@angular/core';
import { firstValueFrom } from 'rxjs';
import { Portfolio } from './path-to-portfolio.model';

@Component({
  selector: 'app-online',
  templateUrl: './online.component.html',
  styleUrls: ['./online.component.css']
})
export class OnlineComponent implements OnInit {
  depoAccount: string | undefined;

  constructor() {}

  async ngOnInit(): Promise<void> {
    try {
      const portfolio = await firstValueFrom(this.currentPortfolio$);
      if (portfolio?.DEPO) {
        this.depoAccount = this.formatAccountNumber(portfolio.DEPO);
      }
    } catch (err) {
      console.error('获取Portfolio数据失败:', err);
    }
  }

  formatAccountNumber(account: string): string {
    if (!account || account.length !== 12) return account;
    const part1 = account.slice(0, 3);
    const part2 = account.slice(3, 10);
    const part3 = account.slice(10);
    return `${part1}-${part2}-${part3}`;
  }
}

步骤2：使用格式化后的账号 #

• 若在模板中直接绑定变量：

<!-- online.component.html -->
<div>{{ depoAccount }}</div>

• 若想保留async管道模式，可在ts中创建格式化后的Observable：

import { map } from 'rxjs/operators';

// 在组件类中定义
formattedDepo$ = this.currentPortfolio$.pipe(
  map(portfolio => {
    if (!portfolio?.DEPO || portfolio.DEPO.length !== 12) return portfolio?.DEPO;
    const part1 = portfolio.DEPO.slice(0, 3);
    const part2 = portfolio.DEPO.slice(3, 10);
    const part3 = portfolio.DEPO.slice(10);
    return `${part1}-${part2}-${part3}`;
  })
);

模板中使用：

<div>{{ formattedDepo$ | async }}</div>

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