*ngFor를 사용하여 개체 키를 반복하는 방법

*ngFor를 사용하여 개체 키를 반복하는 방법

Angular 2의 *ngFor를 사용하여 [object object]를 반복합니다.

문제는 개체가 개체의 배열이 아니라 개체가 더 포함된 개체의 개체라는 것입니다.

{

  "data": {
    "id": 834,
    "first_name": "GS",
    "last_name": "Shahid",
    "phone": "03215110224",
    "role": null,
    "email": "test@example.com",
    "picture": **{ <-- I want to get thumb: url but not able to fetch that**
      "url": null,
      "thumb": {
        "url": null
      }
    },
    "address": "Nishtar Colony",
    "city_id": 2,
    "provider": "email",
    "uid": "test@example.com"
  }
}

파이프를 사용하여 객체를 반복할 수 있다는 것은 알고 있지만 객체에서 객체로 더 멀리 반복할 수 있는 방법은 데이터->그림->섬:url을 의미합니다.

각도 6.0.0

https://github.com/angular/angular/blob/master/CHANGELOG.md#610-2018-07-25

소개한KeyValuePipe

https://angular.io/api/common/KeyValuePipe 도 참조

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

원래의

파이프를 사용하시면 됩니다.

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

<div *ngFor="let key of objs | keys">

참고 항목 *ngFor?를 사용하여 개체 키를 반복하는 방법

이를 위한 가장 우아한 방법은 자바스크립트를 이렇게 사용하는 것이라고 생각합니다. (처음에 파이프를 구현했지만 저는 불필요한 작업을 복잡하게 만들 뿐입니다.)

Component pass Object to 템플릿에서:

Object = Object;

다음 템플릿에서:

<div *ngFor="let key of Object.keys(objs)">
   my key: {{key}}
   my object {{objs[key] | json}} <!-- hier I could use ngFor again with Object.keys(objs[key]) -->
</div>

하위 개체가 많으면 개체를 인쇄할 구성 요소를 만들어야 합니다.값과 키를 원하는 대로 인쇄하고 하위 개체에 자신을 재귀적으로 호출하여 인쇄합니다.

Hier 두 방법 모두 스택블리츠 데모를 찾을 수 있습니다.

이 질문은 이미 답변이 완료된 것으로 알고 있지만 이에 대한 해결책이 하나 있습니다.

내부를 사용할 수도 있습니다.*ngFor필요한 결과를 얻기 위해서입니다.

스택블리츠에 대한 데모를 만들었습니다.이것이 당신/다른 사람들에게 도움이 되기를 바랍니다.

코드 스니펫

HTML 코드

<div *ngFor="let key of Object.keys(myObj)">
  <p>Key-> {{key}} and value is -> {{myObj[key]}}</p>
</div>

.ts 파일 코드

Object = Object;

myObj = {
    "id": 834,
    "first_name": "GS",
    "last_name": "Shahid",
    "phone": "1234567890",
    "role": null,
    "email": "test@example.com",
    "picture": {
        "url": null,
        "thumb": {
            "url": null
        }
    },
    "address": "XYZ Colony",
    "city_id": 2,
    "provider": "email",
    "uid": "test@example.com"
}

사용자 지정 파이프를 만들어야 합니다.

import { Injectable, Pipe } from '@angular/core';
@Pipe({
   name: 'keyobject'
})
@Injectable()
export class Keyobject {

transform(value, args:string[]):any {
    let keys = [];
    for (let key in value) {
        keys.push({key: key, value: value[key]});
    }
    return keys;
}}

그리고 당신의 *ngFor에 그것을 사용합니다.

*ngFor="let item of data | keyobject"

Angular HTML 템플릿에서 객체를 순환합니다.

KeyValuePipe는 Angular: https://angular.io/api/common/KeyValuePipe 을 참조하십시오.

빠른 코드:

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

1.맞춤 파이프를 만들어 키를 가져옵니다.

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

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return Object.keys(value);
  }
}

2. 각도 템플릿 파일에서는 *ngFor를 사용하고 개체 개체 위에서 반복할 수 있습니다.

<div class ="test" *ngFor="let key of Obj | keys">
    {{key}}
    {{Obj[key].property}
<div>

이제 Angular에는 정확히 이 시나리오에 대한 반복 개체 유형이 있으며 이를 집합이라고 합니다.제가 이 질문을 검색했을 때 제 요구에 맞았습니다.집합을 생성하고 배열에 "푸시"하는 것처럼 추가하고 배열과 마찬가지로 ngFor에 드롭합니다.파이프 같은 것은 없습니다.

this.myObjList = new Set();

...

this.myObjList.add(obj);

...

<ul>
   <li *ngFor="let object of myObjList">
     {{object}}
   </li>
</ul>

사용하는 경우map()당신의 응답에 따라, 당신은 아마도 체인 A를 할 수 있을 것입니다.toArray()그 연산자...그러면 새로 만든 배열을 반복할 수 있을 겁니다... 적어도 저한테는 효과가 있었죠 :)

템플릿에서 중첩 루프를 여러 번 문제 해결한 결과, 이 작업이 사용자에게 더 효과적이라는 것을 알 수 있었습니다.

(한 가지 이유는 저는 agm-polygon을 반복하려고 했지만 디브들을 둥지로 만들지는 못했습니다.)

incomponent.ts:

Object = Object

values= Object.values(this.arrayOfObjects)

incomponent.html:

<div *ngFor='let value of values'>{{value.property}}</div>

값을 검색하면 Itable이 있으므로 템플릿의 키를 반복할 필요가 없습니다. 복잡해지고 지저분하게 보일 수 있습니다.

저라면 이렇게 할 것입니다.

<li *ngFor="let item of data" (click)='onclick(item)'>{{item.picture.url}}</li>

언급URL : https://stackoverflow.com/questions/41396435/how-to-iterate-object-keys-using-ngfor