Как передать переменную в ngFor с помощью ngx-translate?

Question

Я пытаюсь перебрать объект json ключ / значение, полученный из файла перевода ngx-translate.

Это прекрасно работает:

<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

с использованием {{ }} только для отображения данных, когда вы обращаетесь к переменной.Если вы хотите перебрать общий массив, вы можете сделать что-то вроде этого:

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

Если у вас есть какие-либо вопросы.Не стесняйтесь спрашивать:)

Answer 2

try

   <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.",

      }]
}

Answer 3

Правильный синтаксис: *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>

Надеюсь, это поможет!