通過 Transloco 加載的陣列上的 Angular 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 的每個元素創建一個 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 中有值。 總之非常感謝！