Question

我正在尝试遍历来自ngx-translate转换文件的键/值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？

3 个答案: