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

Question

我正在使用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>

我想为datalist的每个元素创建一个平铺，角不会抛出异常。但是，它没有加载任何东西(tst2没有显示)。我将有多个转换的数据，我希望在未来的能力，轻松地添加和删除数据，而不触及模板。

这是我的第一个角度计划，我可能错过了一些明显的东西。有什么想法吗？

Answer 1

非常感谢您的回答，我尝试了您所说的，但是如果不事先通过transloco加载datalist，ngFor就不存在datalist。

我重新考虑了我的部件，清理了我的进口品。我设法使它工作(即使我真的不知道为什么)，通过添加：

datalist: any;

在我的component.ts中，我应该稍后再键入它。

我对正在发生的事情的最佳选择是，当我在模板中调用*transloco="let datalist; read: 'Datalist'">时，它会在我的component.ts中初始化datalist，这样当我调用ngFor时，它就会在component.ts中找到带有值的datalist。总之，非常感谢！

Answer 2

您应该能够使用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