Angular 如何使用'；transloco&x27；在“扇形图”中？

这是我的代码：

.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>

fa.JSON：

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

在控制台内部，我看到

name

s类似：

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

将分配给

图表饼图的
单个
JSON如下所示：

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

但我想做的是将
饼图
的标签更改为翻译后的名称。现在我的图表是这样的，显示
transloco
无法正常工作：

您需要根据以下内容更新传递到图表的配置：

标签
-
布尔值
-显示或隐藏标签。

labelFormatting
-
function
-格式化标签文本的函数

因为您想显示标签并格式化它们，所以需要两者。将
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>




这是一个。

使用structural指令的另一个优点是，只有在具有转换值时，模板才会渲染

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