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

【问题标题】：How to pass a variable to ngFor with ngx-translate?如何使用 ngx-translate 将变量传递给 ngFor？
【发布时间】：2019-02-01 11:05:09
【问题描述】：

我正在尝试遍历来自 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"]
        }
    }
}

【问题讨论】：

标签： angular angular7 ngx-translate

【解决方案1】：

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

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

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

【讨论】：

你的意思是我应该先构造myCustomArray 然后迭代它吗？我认为您的建议是先构建数组，但是在将其提供给| translate 管道之前，我怎么知道该数组应该使用哪种语言？
我不明白为什么会这样，但确实如此。我只是在构造函数字符串中设置myCustomArray = "gallery." + id + ".images"
您好，问题是我们不知道您的阵列是如何构建的。因此，我们以一般方式为您提供帮助。 myCustomArray 是之前在 nameOfComponent.ts 处声明的数组。所以我们正在迭代该数组并将每次迭代保存在item。

【解决方案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>

希望对你有帮助！

【讨论】：

这不是我想要的，我想显示特定用户的图像，其 id 作为参数通过 url 传递

【解决方案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.",

      }]
}

【讨论】：