Iterate over object in Angular

前端 未结 17 1334
攒了一身酷
攒了一身酷 2020-11-22 12:19

I am trying to do some things in Angular 2 Alpha 28, and am having an issue with dictionaries and NgFor.

I have an interface in TypeScript looking like this:

相关标签:
17条回答
  • 2020-11-22 12:32

    Updated : Angular is now providing the pipe for lopping through the json Object via keyvalue :

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

    WORKING DEMO , and for more detail Read


    Previously (For Older Version) : Till now the best / shortest answer I found is ( Without any Pipe Filter or Custom function from Component Side )

    Component side :

    objectKeys = Object.keys;
    

    Template side :

    <div *ngFor='let key of objectKeys(jsonObj)'>
       Key: {{key}}
    
        <div *ngFor='let obj of jsonObj[key]'>
            {{ obj.title }}
            {{ obj.desc }}
        </div>
    
    </div>
    

    WORKING DEMO

    0 讨论(0)
  • 2020-11-22 12:37

    In addition to @obscur's answer, here is an example of how you can access both the key and value from the @View.

    Pipe:

    @Pipe({
       name: 'keyValueFilter'
    })
    
    export class keyValueFilterPipe {
        transform(value: any, args: any[] = null): any {
    
            return Object.keys(value).map(function(key) {
                let pair = {};
                let k = 'key';
                let v = 'value'
    
    
                pair[k] = key;
                pair[v] = value[key];
    
                return pair;
            });
        }
    
    }
    

    View:

    <li *ngFor="let u of myObject | 
    keyValueFilter">First Name: {{u.key}} <br> Last Name: {{u.value}}</li>
    

    So if the object were to look like:

    myObject = {
        Daario: Naharis,
        Victarion: Greyjoy,
        Quentyn: Ball
    }
    

    The generated outcome would be:

    First name: Daario
    Last Name: Naharis

    First name: Victarion
    Last Name: Greyjoy

    First name: Quentyn
    Last Name: Ball

    0 讨论(0)
  • 2020-11-22 12:37

    In JavaScript this will translate to an object that with data might look like this

    Interfaces in TypeScript are a dev time construct (purely for tooling ... 0 runtime impact). You should write the same TypeScript as your JavaScript.

    0 讨论(0)
  • 2020-11-22 12:38

    I had a similar issue, built something for objects and Maps.

    import { Pipe } from 'angular2/core.js';
    
    /**
     * Map to Iteratble Pipe
     * 
     * It accepts Objects and [Maps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
     * 
     * Example:
     * 
     *  <div *ngFor="#keyValuePair of someObject | mapToIterable">
     *    key {{keyValuePair.key}} and value {{keyValuePair.value}}
     *  </div>
     * 
     */
    @Pipe({ name: 'mapToIterable' })
    export class MapToIterable {
      transform(value) {
        let result = [];
        
        if(value.entries) {
          for (var [key, value] of value.entries()) {
            result.push({ key, value });
          }
        } else {
          for(let key in value) {
            result.push({ key, value: value[key] });
          }
        }
    
        return result;
      }
    }

    0 讨论(0)
  • 2020-11-22 12:38

    Angular 2.x && Angular 4.x do not support this out of the box

    You can use this two pipes to iterate either by key or by value.

    Keys pipe:

    import {Pipe, PipeTransform} from '@angular/core'
    
    @Pipe({
      name: 'keys',
      pure: false
    })
    export class KeysPipe implements PipeTransform {
      transform(value: any, args: any[] = null): any {
        return Object.keys(value)
      }
    }
    

    Values pipe:

    import {Pipe, PipeTransform} from '@angular/core'
    
    @Pipe({
      name: 'values',
      pure: false
    })
    export class ValuesPipe implements PipeTransform {
      transform(value: any, args: any[] = null): any {
        return Object.keys(value).map(key => value[key])
      }
    }
    

    How to use:

    let data = {key1: 'value1', key2: 'value2'}
    
    <div *ngFor="let key of data | keys"></div>
    <div *ngFor="let value of data | values"></div>
    
    0 讨论(0)
  • 2020-11-22 12:41

    Adding to SimonHawesome's excellent answer. I've made an succinct version which utilizes some of the new typescript features. I realize that SimonHawesome's version is intentionally verbose as to explain the underlying details. I've also added an early-out check so that the pipe works for falsy values. E.g., if the map is null.

    Note that using a iterator transform (as done here) can be more efficient since we do not need to allocate memory for a temporary array (as done in some of the other answers).

    import {Pipe, PipeTransform} from '@angular/core';
    
    @Pipe({
        name: 'mapToIterable'
    })
    export class MapToIterable implements PipeTransform {
        transform(map: { [key: string]: any }, ...parameters: any[]) {
            if (!map)
                return undefined;
            return Object.keys(map)
                .map((key) => ({ 'key': key, 'value': map[key] }));
        }
    }
    
    0 讨论(0)
提交回复
热议问题