Как перебрать свойства объекта с помощью ngFor в Angular

Question

Как перебрать свойства объекта с помощью ngFor в Angular

Это пост об интересной проблеме, которую я нашел на работе.

Если вы еще этого не знаете. Я говорю об Angular 2+

Эта проблема

Таким образом, вы хотите отобразить разметку для списка, значения для этого списка берутся из внутреннего интерфейса и по какой-то причине вместо старого доброго массива объектов вы получаете что-то вроде этого.

    { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}

Затем вы пытаетесь использовать * ngFor, но появляется сообщение об ошибке:

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

Вы можете исправить это в бэкэнде, чтобы получить массив объектов, но у вас нет времени для этого. Не волнуйся, дитя, я поймал нас.

97

javascript angular typescript ecmascript-6

Источник

user5106544 22 авг '17 в 13:32

9 ответов

Другие вопросы по тегам javascript angular typescript ecmascript-6

user1205871 07 авг '18 в 20:40 2018-08-07 20:40 · Answer 1 · 2018-08-07 20:40

В Angular 6.1 была введена KeyValuePipe, которая позволяет перебирать свойства объекта:

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

Документы: https://angular.io/api/common/KeyValuePipe

206

Источник

user1205871 07 авг '18 в 20:40

user8203828 24 авг '17 в 12:43 2017-08-24 12:43 · Answer 2 · 2017-08-24 12:43

Я не знаю, насколько это безопасно, но в этих простых случаях мне не нравится решение для канала, поэтому я обычно использую:

<div *ngFor="let k of objectKeys(yourObject)">
    {{yourObject[k].color}}
</div>

и в контроллере:

objectKeys(obj) {
    return Object.keys(obj);
}

Это довольно частый случай, я не понимаю, почему нет стандартной реализации для этого, как в Angular.js 1.x

user2953817 22 авг '17 в 13:51 2017-08-22 13:51 · Answer 3 · 2017-08-22 13:51

Лучшим решением было бы использовать трубу, такую как эта:

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Convert Object to array of keys.
 */
@Pipe({
  name: 'appProperties'
})
export class PropertiesPipe implements PipeTransform {

  transform(value: {}): string[] {

    if (!value) {
      return [];
    }

    return Object.keys(value);
  }
}

Тогда в вашем шаблоне:

<div *ngFor="let property of response | appProperties">
    <div *ngFor="let item of response[property]">
         {{item.something}}
    </div>
</div>

user10708105 29 ноя '18 в 18:14 2018-11-29 18:14 · Answer 4 · 2018-11-29 18:14

    <div *ngFor="let item of donation_list | keyvalue">
        <div class="donation-box">
             <Label class="donation-label">Date : {{item.value.PaymentDate}}</Label>
             <Label class="donation-label">Time : {{item.value.PaymentTime}}</Label>

        </div>
   </div>

Если у вас есть больше свойств внутри объекта, вы можете использовать как это.

12

Источник

user10708105 29 ноя '18 в 18:14

user6666348 16 дек '22 в 17:27 2022-12-16 17:27 · Answer 5 · 2022-12-16 17:27

Есть 2 способа:

Если у ваших объектов нет ключа

        { name: 'John', age: 18,... }

<div *ngFor="let item of myObj | keyvalue">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}}</span>
</div>

Если у ваших объектов есть ключ

Трубка

        import { Pipe, PipeTransform } from "@angular/core";

type Args = "keyvalue" | "value" | "key";

@Pipe({
    name: "pipeMapToIterable",
    pure: false
})
export class MapToIterablePipe implements PipeTransform {
    transform(obj: {}, arg: Args = "keyvalue") {
        return arg === "keyvalue" ?
            Object.keys(obj).map(key => ({ key: key, value: obj[key] })) :
            arg === "key" ?
                Object.keys(obj) :
                arg === "value" ?
                    Object.keys(obj).map(key => obj[key]) :
                    null;
    }
}

HTML

        { 
    John: { name: 'John', age: 18 },
    Bob: { name: 'Bob', age: 25},
    Marry: { name: 'Marry', age: 22}
}

<!-- default -->
<div *ngFor="let item of myObj | pipeMapToIterable">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}</span>
</div>


<!-- keyvalue -->
<div *ngFor="let item of myObj | pipeMapToIterable : 'keyvalue'">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}</span>
</div>


<!-- value -->
<div *ngFor="let item of myObj | pipeMapToIterable : 'value'">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}</span>
</div>


<!-- key -->
<div *ngFor="let item of myObj | pipeMapToIterable : 'key'">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}</span>
</div>

user52690 11 май '20 в 20:01 2020-05-11 20:01 · Answer 6 · 2020-05-11 20:01

Используйте Object.values, чтобы получить из вашего объекта обычный массив. Object.keys кажется лишней работой.

Ссылка:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values

2

Источник

user52690 11 май '20 в 20:01

user5106544 22 авг '17 в 13:32 2017-08-22 13:32 · Answer 7 · 2017-08-22 13:32

Решение

В идеальном мире вы получите множество объектов, поскольку мир не всегда идеален. Что вы хотите сделать, это хранить все эти объекты в массиве. Вот упрощенное решение в простом старом JavaScript.

Шаг 1. Получить все ключи объекта. используя Object.keys. Этот метод возвращает массив собственных перечисляемых свойств данного объекта.

Шаг 2. Создайте пустой массив. Это то место, где будут жить все свойства, так как ваш новый цикл ngFor будет указывать на этот массив, мы должны перехватить их все.

Шаг 3. Выполните итерацию throw всех ключей и вставьте каждый в созданный вами массив.

Вот как это выглядит в коде.

// Evil response in a variable. Here are all my vehicles.
let evilResponse = { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}
// Step 1. Get all the object keys.
let evilResponseProps = Object.keys(evilResponse);
// Step 2. Create an empty array.
let goodResponse = [];
// Step 3. Iterate throw all keys.
for (prop of evilResponseProps) { 
    goodResponse.push(evilResponseProps[prop]);
}

Затем вы можете назначить goodResponse свойству класса, которое вы пытались выполнить в первую очередь.

Это все, ребята.

user17454785 19 ноя '21 в 08:32 2021-11-19 08:32 · Answer 8 · 2021-11-19 08:32

Вы можете попробовать это:

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

Для получения дополнительной информации посетите: https://angular.io/api/common/KeyValuePipe

-1

Источник

user17454785 19 ноя '21 в 08:32

user12697775 17 июн '22 в 11:52 2022-06-17 11:52 · Answer 9 · 2022-06-17 11:52

объявите свой массив как любой, а затем назначьте свой объект

      data=[] as any;
myObj={};

data=myObj;

теперь прокручиваем массив данных

      <tr *ngFor="let item of data">
<td>{{item.property}}</td>
</tr>

-1

Источник

user12697775 17 июн '22 в 11:52