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

Question

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

这很好用：

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

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

<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

使用{{ }}仅用于在访问变量时显示数据。如果要迭代一般数组，可以执行以下操作：

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

如果你有任何问题。随意问:)

Answer 2

正确的语法是*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 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.",

      }]
}