Angular ngFor 在通过 Transloco 加载的数组上

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的每个元素创建一个tile，angular没有抛出异常。但是，它不加载任何内容（tst2 不显示）。我将对该数据进行多次翻译，我希望将来能够在不接触模板的情况下轻松添加和删除数据。

这是我的第一个 angular 项目，我可能错过了一些明显的东西。有什么想法吗？

Answer 1

您应该可以使用 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

Answer 2

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

我重新开始了我的组件并清理了我的导入。我设法通过添加使其工作（即使我真的不知道为什么）：

datalist: any;

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

我对正在发生的事情最好的选择是，当我在我的模板中调用 *transloco="let datalist; read: 'Datalist'"> 时，它会初始化我的 component.ts 中的数据列表，这样当我调用 ngFor 时，它会在 component.ts 中找到值的数据列表。无论如何，非常感谢！

Angular ngFor 在通过 Transloco 加载的数组上

Angular ngFor on an array loaded via Transloco

angular

transloco