如何使用 ngx-translate 将变量传递给 ngFor？

Question

我正在尝试迭代来自 ngx-translate 的翻译文件的 key/value json 对象。

这很好用：

<div *ngFor="let item of 'gallery.01.images' | translate | keyvalue">
    <p>{{item .key}}:{{item .value}}</p>
</div>

但是如果我想在可迭代对象中包含一个变量，它会抛出以下错误：

<div *ngFor="let item of 'gallery.{{id}}.images' | translate | keyvalue">
    <p>{{item .key}}:{{item .value}}</p>
</div>

错误

emplate parse errors: Can't bind to '*ngFor' since it isn't a known property of 'div'

i18n/en.json

{
    "gallery": {
        "01: {
            "images": ["001", "002", "003"]
        },
        "02: {
            "images": ["006", "009"]
        }
    }
}

Answer 1

正确的语法是 *ngFor="let item of items"，其中 Angular 期望在 items.

中获得可迭代值的数组

我相信你想做的是在 gallery.id 和 images

上迭代两次

<div *ngFor="let item of gallery">
    <div *ngFor="let it of 'gallery.id.images' | translate | keyvalue">    
        <p>{{item .key}}:{{item .value}}</p>
    </div>
</div>

希望对您有所帮助！

Answer 2

使用{{ }} 仅用于在访问变量时显示数据。如果你想遍历一个通用数组，你可以这样做：

<div *ngFor="let item of myCustomArray | translate | keyvalue">
    <p>{{item .key}}:{{item .value}}</p>
</div>

如果您有任何问题。欢迎提问:)

Answer 3

尝试

   <div *ngFor="let service of ('AboutUs.data' | translate)">
                      <p>{{service.title}}</p>
                      <p>{{service.description}}</p>
   </div>

在 .json 中的数组如下：

 "AboutUs": {
    "title": "About Us",
    "data": [
      {
        "title": "Mission",
        "description": "Lorem ipsum dolor sit amesexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      },
      {
        "title": "Plan",
        "description": "Lorem ipsum dolor do consequat.",

      }]
}

如何使用 ngx-translate 将变量传递给 ngFor？

How to pass a variable to ngFor with ngx-translate?

ngx-translate

angular

angular7