如何在Angular的'pie-chart'上使用'transloco'？

编程问答 2022-08-15

问题描述

这是我的代码：

.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 شپنا

下面将分配给single的{​​{1}} JSON：

chart-pie

但是我要做的是将single is (3) [{…},{…},{…}] 0: {name: "حکشتی",value: 72} 1: {name: "فملی",value: 58} 2: {name: "شپنا",value: 61} length: 3 __proto__: Array(0) 的标签更改为翻译后的名称。现在，我的图表看起来像这样，表明pie-chart无法正常工作：

enter image description here

解决方法

您需要根据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。
使用结构化指令的另一个优点是，只有在您拥有转换值时，模板才会呈现。

angularangularchartstransloco