Core: *ngFor issue

Created on 26 Jun 2017  路  12Comments  路  Source: ngx-translate/core

I'm submitting a ... (check one with "x")

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[X] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

I have this code

<div *ngFor="let service of services">
    <span><img  [src]="service.imgPath" alt="{{ service.name }}"/></span>
    <h4>{{ service.name}}</h4>
    <p>{{ service.desc }}</p>
</div>

And .json file

"service":[
    { "name" : "someName1", "desc" : "someDesc1"},
    { "name" : "someName2", "desc" : "someDesc2"},
    { "name" : "someName3", "desc" : "someDesc3"}
  ]

How can I do translation of each service that have 2 parameters

In regular case I use {{ 'something' | translate }} , where "something" is placed in .json file

"something" : "translation"
So how can a use it in state of ngFor? It read me an object from .json, but not array of objects that what I need in my case

  • ngx-translate version: 7.0.0

  • Angular version: 4.0.0

  • Browser: [all]

questiosupport

Most helpful comment

Not working,

ERROR Error: Cannot find a differ supporting object 'service' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

That's weird... because that's how my project is working.
I'm using it like this

<div *ngFor="let service of ('service' | translate)">
    <p>{{service.name}}</p>
    <p>{{service.desc}}</p>
</div>

The json is structured like this

{
  "service": [
    { "name" : "someName1", "desc" : "someDesc1"},
    { "name" : "someName2", "desc" : "someDesc2"},
    { "name" : "someName3", "desc" : "someDesc3"}
  ]
}

All 12 comments

I'm also trying to achieve something similar, any suggestions?

Hello,

Maybe this will help you. I have a collection of "TrackerType" in availableTypes which are integer (0, 1, etc.) and I use the translate attribute which will get the translation which match the content as a key.

<div *ngFor="let type of availableTypes" [value]="type" translate>TrackerType_{{type}}</div>

With this translation files :

{
  "TrackerType_0": "Une valeur"
  "TrackerType_1": "Deux valeurs"
}

what if i have multiple object inside an object

```
{
"TrackerType_0": "Une valeur",
"TrackerType_1": "Deux valeurs",
"Test1":{
"TrackerType_0": "Une valeur"
"TrackerType_1": "Deux valeurs"
},
"Test2":{
"TrackerType_0": "Une valeur"
"TrackerType_1": "Deux valeurs"
}

}````

@jonathanantoine

Maybe using the dot notation works ? Did you try it ?

Hello, I'm closing this issue because it's too old.
If you have a similar problem with recent version of the library, please open a new issue.

its not fixed

I made it work with this

<div *ngFor="let service of ('service' | translate)">
   <span><img  [src]="service.imgPath" alt="{{ service.name }}"/></span>
  <h4>{{ service.name}}</h4>
  <p>{{ service.desc }}</p>
</div>

I made it work with this

<div *ngFor="let service of ('service' | translate)">
   <span><img  [src]="service.imgPath" alt="{{ service.name }}"/></span>
  <h4>{{ service.name}}</h4>
  <p>{{ service.desc }}</p>
</div>

Not working,

ERROR Error: Cannot find a differ supporting object 'service' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

Not working,

ERROR Error: Cannot find a differ supporting object 'service' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

That's weird... because that's how my project is working.
I'm using it like this

<div *ngFor="let service of ('service' | translate)">
    <p>{{service.name}}</p>
    <p>{{service.desc}}</p>
</div>

The json is structured like this

{
  "service": [
    { "name" : "someName1", "desc" : "someDesc1"},
    { "name" : "someName2", "desc" : "someDesc2"},
    { "name" : "someName3", "desc" : "someDesc3"}
  ]
}

Not working,
ERROR Error: Cannot find a differ supporting object 'service' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

That's weird... because that's how my project is working.
I'm using it like this

<div *ngFor="let service of ('service' | translate)">
  <p>{{service.name}}</p>
  <p>{{service.desc}}</p>
</div>

The json is structured like this

{
  "service": [
    { "name" : "someName1", "desc" : "someDesc1"},
    { "name" : "someName2", "desc" : "someDesc2"},
    { "name" : "someName3", "desc" : "someDesc3"}
  ]
}

Nice hack bro, thank you. You saved my azz.

i am also having the same problem any solution available?

https://github.com/ngx-translate/core/issues/1011

no me funciono

Was this page helpful?
0 / 5 - 0 ratings

Related issues

guysan picture guysan  路  4Comments

jellene4eva picture jellene4eva  路  3Comments

bjornharvold picture bjornharvold  路  3Comments

crebuh picture crebuh  路  3Comments

pndewit picture pndewit  路  3Comments