Вывод данных в angular

139

25 октября 2019, 06:30

При выводе данных в html

<div >
    {{ row.details}}
 </div>

Получаю [object Object], можно ли как сделать вывод ключ : значение, не используя конкретное указание полей к примеру {{ row.details.Printers}} , то есть модифицировав только row.details ,что бы отображалось как

Printers :3500, 3050, 3000 Series
Material: Board 
....

Answer 1

В Angular есть KeyValuePipe. Использование очень простое и описано детально в документации.

В вашем случае достаточно пропустить объект row.details через этот конвеер:

<ng-container *ngFor="let item of row.details | keyvalue">
  // `item` это объект у которого есть свойства `key` и `value`
  <div *ngFor="let product of item.value">
    {{ product }}
  <div>
</ng-container>

Альтернатива - это в компоненте объявить метод getKeysForDetails, который будет возвращать список ключей для объекта row.details:

public getKeysForDetails = (details) => Object.keys(details);

И использовать в шаблоне должным образом:

<ng-container *ngFor="let key of getKeysForDetails(row.details)">
  <div *ngFor="let product of row.details[key]">{{ product }}</div>
</ng-container>

Мое личное мнение - используйте первый вариант с конвеером (пайпом). У конвееров есть определенное поведение под капотом и они часто используются для бустинга производительности.

Answer 2

Есть pipe json