如何在Angular的‘`pie chart`上使用'transloco’？

Question

这是我的代码：

.HTML：

            <div fxFlex>
                <ngx-charts-pie-chart
                    [view]="view"
                    [scheme]="colorScheme"
                    [results]="single0"
                    [gradient]="gradient"
                    [legend]="showLegend"
                    [legendPosition]="legendPosition"
                    [labels]="showLabels | transloco"
                    [doughnut]="isDoughnut"
                    (select)="onSelect($event)"
                    (activate)="onActivate($event)"
                    (deactivate)="onDeactivate($event)"
                    >
                </ngx-charts-pie-chart>
            </div>

.TS：

  let name = this.translocoService.translate(basket[key].name);
  console.log("the name is" , name); 

fa.JSON：

{
        "فملی": "Femelli",
        "حکشتی": "Hekeshti",
        "شپنا": "Shepna",
        "ولملت": "Wlmlt",
        "ومشان": "Wmshan"
}

在控制台中，我看到了如下的name：

the name is فملی
the name is حکشتی
the name is شپنا

将分配给chart-pie的single JSON如下所示：

single is 
(3) [{…}, {…}, {…}]
0: {name: "حکشتی", value: 72}
1: {name: "فملی", value: 58}
2: {name: "شپنا", value: 61}
length: 3
__proto__: Array(0)

但我想要做的是将pie-chart的标签更改为翻译后的名称。我的图表现在看起来像这样，显示transloco不能正常工作：

​

​

Answer 1

根据the docs的说法，您需要更新传递给图表的配置

labels - boolean -显示或隐藏标签。

labelFormatting - fucntion -设置标签文本格式的函数。

由于您希望显示标签并对其进行格式化，因此两者都需要。将labels设置为true，为了使用transloco服务格式化标签，您需要将转换函数传递给labelFormatting属性：

<ng-container *transloco="let t">
  <ngx-charts-pie-chart
    [results]="data"
    [scheme]="colorScheme"
    [labels]="true"
    [labelFormatting]="t">
  </ngx-charts-pie-chart>
</ng-container>

这是一个live example。

使用structural指令的另一个好处是，只有当您拥有翻译值时，模板才会呈现。