Ngx Pie Chart问题：labelFormatting中无法访问portfolio输入属性

问题说明 #

在labelFormatting方法中尝试访问@Input()传入的portfolio属性时，该属性始终为undefined，无法用其计算持仓总和来将标签格式化为百分比。推测原因是图表初始化时，labelFormatting方法被提前调用，此时portfolio还未完成赋值。

解决方案 #

1. 确保方法保留组件上下文 #

直接将labelFormatting方法传给ngx-charts组件时，方法内部的this会指向图表组件而非当前业务组件，导致无法访问portfolio。可以通过箭头函数绑定来确保this始终指向当前组件。

2. 提前计算持仓总和 #

避免在格式化方法中实时计算总和，而是在portfolio变化时预先计算好总和存入组件属性，格式化方法直接使用该属性即可。

修改后的代码 #

组件代码 #

export class PortfolioPreviewCardComponent {
    @Input() set portfolio(value: IPortfolio) {
        // 监听portfolio变化，实时计算持仓总和
        this._portfolio = value;
        this.totalHoldings = value?.holdings.reduce((accumulator, item) => accumulator + item.total, 0) || 0;
    }
    get portfolio(): IPortfolio {
        return this._portfolio!;
    }
    private _portfolio!: IPortfolio;
    totalHoldings = 0;
    data = [...];

    // 图表配置项
    showLegend = false;
    showLabels = true;
    isDoughnut = true;

    // 用箭头函数绑定组件上下文
    labelFormatting = (name: string) => {
        const targetData = this.data.find(item => item.name === name);
        
        if(targetData && this.totalHoldings > 0) {
            return `${((targetData.value / this.totalHoldings) * 100).toFixed(2)}%`;
        } else {
            return name;
        }
    }
}

模板代码 #

<ngx-charts-pie-chart
        *ngIf="portfolio"
        scheme="cool"
        [results]="data"
        [legend]="showLegend"
        [labels]="showLabels"
        [doughnut]="isDoughnut"
        [labelFormatting]="labelFormatting"
        (select)="onSelect($event)"
        (activate)="onActivate($event)"
        (deactivate)="onDeactivate($event)"
>
</ngx-charts-pie-chart>

关键改动说明 #

• 通过setter监听portfolio的赋值变化，确保每次portfolio更新时都重新计算持仓总和totalHoldings。
• 用箭头函数定义labelFormatting，彻底避免this上下文丢失的问题，直接访问组件内的totalHoldings和data。
• 移除原代码中依赖图表组件上下文的self.series，直接使用组件自身维护的data，逻辑更简洁可控。

内容的提问来源于stack exchange，提问作者Manuel Brás