Angular 2 ngFor?

Question

[Nubbin]

Добрый день, не могу понять почему она выдает ошибку

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

//Выдает ошибка именно в этом варианте
{"in":{"231":{'name': 'test1'}, "2351":{'name': 'test2'}, "1231":{'name': 'test3'}}


//Тут все нормально
{"in":{"0":{'name': 'test1'}, "1":{'name': 'test2'}, "2":{'name': 'test3'}}

this.getJson().subscribe((data:any) => {
this.listers        = data['in'];
}

<div *ngFor="let item of listers; let i=index"</div>

Ребята помогите пожалуйста, просто мне именно нужен первый вариант

Answer 1

[Demian Smith]

ngFor не работает с объектами, которые нельзя проитерировать. Нужно привести data['in'] к массиву. Попробуйте так:

this.listers = Object.values(data['in']);

Comments

[Nubbin]

Я заметил, что там проблема именно в ключах.
В моем варианте не подходят обычные ключи (0,1,2,3,4...)

[Demian Smith]

Nubbin, Ангуляр явно говорит что ngFor не работает с объектами, которые не поддерживают Iterable. По идеи не важно какие ключи у объекта, он не должен работать с ngFor. Глядя на код ngFor в ангуляре тоже видно что ngFor не заработает с обычным объектом. Только что из спортивного интереса попробовал скормить вот такой объект циклу ngFor

{0: 'a', 1: 'b'}

и получил такую же ошибку.

Удивительно что у вас работает вариант к с ключами по порядку.

[Nubbin]

Demian Smith, Может в новых версиях изменили.

У меня 6.0.2

Answer 2

[0xD34F]

Вместо this.listers = data['in']; пусть будет

this.listers = Object.entries(data.in).map(([key, val]) => ({ key, val }));

Тогда при переборе listers в ngFor ключи будут доступны как item.key, а значения - как item.val.