如何在Angular中从Firm对象获取数据以计算百分比？

1. 补全Firm接口定义 #

你的Firm接口未包含maxIncomePerYear和maxIncomePer365字段，这是直接访问报错的核心原因。需将这两个字段补充到接口中，确保与后端返回的数据结构一致：

export interface Firm {
  name: string;
  fullName: string;
  ein: string;
  crn: string;
  email: string;
  email2: string;
  address: string;
  address2: string;
  zip: string;
  city: string;
  country: string;
  phone: string;
  phone2: string;
  type: string;
  logo: string;
  disabled: boolean; // 修正为boolean类型，原字面量true会导致类型报错
  taxPayer: boolean; // 同理修正为boolean类型
  locale: string;
  currency: string;
  domain: string;
  maxIncomePerYear: number; // 添加缺失字段
  maxIncomePer365: number; // 添加缺失字段
}

2. 修正代码笔误 #

你在calcInvoiced方法中写的this.firms是错误的，需改为与类中定义一致的this.firm，同时添加空值判断避免空指针：

calcInvoiced = () => {
  if (!this.firm || !this.insights?.incomeForYear) return '0.00';
  return ((this.firm.maxIncomePerYear / this.insights.incomeForYear) * 100).toFixed(2);
}

3. 处理异步数据加载问题 #

ngOnInit中的两个请求都是异步操作，firm和insights的加载完成时间不确定，直接调用计算方法可能出现数据未初始化的情况。可以用Promise.all等待两个请求全部完成后再处理：

ngOnInit(): void {
  Promise.all([
    this.provider.getInsights(this.firmService.getDomain()),
    this.provider.getCurrent(this.firmService.getDomain())
  ]).then(([insightsData, firmData]) => {
    this.insights = insightsData;
    this.firm = firmData;
    // 数据加载完成后可在此触发计算或视图更新
  });
}

4. 优化类型安全（可选） #

建议给insights定义专属接口，避免使用any类型，提升代码可维护性：

export interface Insights {
  incomeForYear: number;
  // 补充其他需要用到的字段
}

// 组件内修改类型声明
insights: Insights;

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