通过Transloco加载的阵列上的Angular ngFor

问题描述

我正在使用Transloco在angular10项目中管理多种语言。我创建了一个json i18n文件，如下所示：

    "Datalist":[
    {
        "from" : "value","Content" : "data"
    },{
        "from" : "value","Content" : "data"
    }...]

在我的模板中，我正在尝试类似的方法来从文件中加载值：

<div class="container" *transloco="let datalist; read: 'Datalist'">
<a>tst1</a>
<div class="tile is-3"  *ngFor="let data of datalist">
    <a>tst2</a>
    <div class="content">{{data.Content}}</div>
    <p class="subtitle">{{data.from}}</p>
</div>

我想为数据列表的每个元素创建一个图块，角度不会引发异常。但是，它不加载任何内容（tst2不显示）。我将对该数据进行多次转换，并且我希望将来能够轻松地添加和删除数据而不接触模板。

这是我的第一个有角度的项目，我可能错过了一些显而易见的事情。有什么想法吗？

解决方法

您应该能够使用transloco管道进行翻译。

<div class="tile is-3"  *ngFor="let data of datalist">
  <a>tst2</a>
  <div class="content">{{data.Content | transloco}}</div>
  <p class="subtitle">{{data.from | transloco}}</p>
</div>

data.content应该包含与i8n .json中相同的密钥。

示例：

en.json

{
    "GLOBAL": {
        "RESET": "Reset","FILTER": "Filter",}
}

HTML：

<button mat-raised-button color="primary" (click)="reset()">{{ 'GLOBAL.RESET' | transloco }}</button

非常感谢我尝试了您所说的答案，但是如果我事先未通过transloco加载ngFor，则数据列表不存在。

我重新开始了我的组件，并清理了导入内容。我设法通过添加以下内容使它起作用（即使我真的不知道为什么）：

datalist: any;

在我的component.ts中，我最好稍后再输入。

我最好的把握是，当我在模板中调用*transloco="let datalist; read: 'Datalist'">时，它将在我的component.ts中初始化数据列表，因此，当我调用ngFor时，它将在component.ts中找到带有值的数据列表。无论如何，非常感谢！

angular angular transloco