나는 비트가 도착하는 방법에 대해 혼란 스러워요 key및 value사용하는 동안 angular2에서 객체의 *ngFor객체를 통해 반복합니다. angular 1.x에는 다음과 같은 구문이 있습니다.

ng-repeat="(key, value) in demo"

하지만 angular2에서 동일한 작업을 수행하는 방법을 모르겠습니다. 나는 성공하지 않고 비슷한 것을 시도했다.

<ul>
  <li *ngFor='#key of demo'>{{key}}</li>
</ul>

demo = {
    'key1': [{'key11':'value11'}, {'key12':'value12'}],
    'key2': [{'key21':'value21'}, {'key22':'value22'}],
  }

내 시도와 함께 plnkr이 있습니다 :
http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview

어떻게 얻을 수 key1및 key2사용하여 동적으로 *ngFor? 광범위하게 검색 한 후 파이프를 사용한다는 아이디어를 찾았지만 어떻게 해야할지 모르겠습니다. angular2에서 동일한 작업을 수행하기위한 내장 파이프가 있습니까?

답변

이 Object.keys템플릿에 액세스 할 수 있으며 사용할 *ngFor.

@Component({
  selector: 'app-myview',
  template: `<div *ngFor="let key of objectKeys(items)">{{key + ' : ' + items[key]}}</div>`
})

export class MyComponent {
  objectKeys = Object.keys;
  items = { keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3' };
  constructor(){}
}

답변

마찬가지로 각도 (V6.1.0)의 최신 버전 , 각도 팀은 새로 만들기로 명명 같은 위해 파이프에 내장 추가했다 keyvalue에,지도, 객체를 통해 당신에게 반복 처리를하기 위해 파이프와 배열 common각 패키지의 모듈. 예를 들어-

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

일하는 예

더 유용한 정보는 여기를 확인하십시오-

Angular v5 이하를 사용하거나 파이프를 사용하려면이 답변을 따르십시오.

ngfor를 사용하여 객체의 액세스 키 및 값

답변

각 요소에 대한 키 목록을 반환하는 사용자 지정 파이프를 만들 수 있습니다. 그런 것 :

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

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push(key);
    }
    return keys;
  }
}

다음과 같이 사용하십시오.

<tr *ngFor="let c of content">
  <td *ngFor="let key of c | keys">{{key}}: {{c[key]}}</td>
</tr>

편집하다

키와 값이 모두 포함 된 항목을 반환 할 수도 있습니다.

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

다음과 같이 사용하십시오.

<span *ngFor="let entry of content | keys">
  Key: {{entry.key}}, value: {{entry.value}}
</span>

답변

이전 버전

또 다른 방법은 NgForIn다음과 같이 사용될 지시문 을 작성 하는 것입니다.

<div *ngFor="let key in obj">
   <b>{{ key }}</b>: {{ obj[key] }}
</div>

플 런커 예

ngforin.directive.ts

@Directive({
  selector: '[ngFor][ngForIn]'
})
export class NgForIn<T> extends NgForOf<T> implements OnChanges {

  @Input() ngForIn: any;

  ngOnChanges(changes: NgForInChanges): void {
    if (changes.ngForIn) {
      this.ngForOf = Object.keys(this.ngForIn) as Array<any>;

      const change = changes.ngForIn;
      const currentValue = Object.keys(change.currentValue);
      const previousValue = change.previousValue ? Object.keys(change.previousValue) : undefined;
      changes.ngForOf =  new SimpleChange(previousValue, currentValue, change.firstChange);

      super.ngOnChanges(changes);
    }
  }
}

답변

Angular 6.1에서 키값 파이프를 사용할 수 있습니다 .

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

그러나 결과 목록을 키 값으로 정렬하는 것은 불편합니다. 중립적 인 것이 필요한 경우 :

@Pipe({ name: 'keyValueUnsorted', pure: false  })
export class KeyValuePipe implements PipeTransform {
  transform(input: any): any {
    let keys = [];
    for (let key in input) {
      if (input.hasOwnProperty(key)) {
        keys.push({ key: key, value: input[key]});
      }
    }
    return keys;
  }
}

pure : false 파이프 속성 을 지정하는 것을 잊지 마십시오 . 이 경우 입력 참조가 변경되지 않은 경우에도 변경 감지주기마다 파이프가 호출됩니다 (물체에 속성을 추가 할 때도 마찬가지 임).

답변

@Thierry의 답변을 예를 들어 설명합니다.

key and value* ngFor 루프에서 가져올 파이프 나 메소드가 없습니다 . 동일한 파이프를 만들어야합니다. thierry가 말했듯이 여기에 코드가있는 대답이 있습니다.

** 파이프 클래스는 입력 값과 선택적 매개 변수 문자열 배열을 사용하여 변환 된 값을 리턴하는 PipeTransform 인터페이스의 변환 메소드를 구현합니다.

** 변환 방법은 파이프에 필수적입니다. PipeTransform 인터페이스는 해당 메소드를 정의하고 툴링 및 컴파일러를 모두 안내합니다. 선택 사항입니다. Angular는 변환 방법을 찾고 상관없이 실행합니다. 자세한 정보는 파이프를 참조하십시오.

import {Component, Pipe, PipeTransform} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';

@Component({
    selector: 'my-app',
    templateUrl: 'mytemplate.html',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
    pipes: [KeysPipe]
})
export class AppComponent {

  demo = {
    'key1': 'ANGULAR 2',
    'key2': 'Pardeep',
    'key3': 'Jain',
  }
}


@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

HTML 부분은 다음과 같습니다.

<ul>
  <li *ngFor='#key of demo | keys'>
   Key: {{key.key}}, value: {{key.value}}
  </li>
</ul>

Plnkr 작업 http://plnkr.co/edit/50LlK0k6OnMnkc2kNHM2?p=preview

RC로 업데이트

의견에 user6123723 (thanks)에서 제안한대로 여기 업데이트입니다.

<ul>
  <li *ngFor='let key of demo | keys'>
   Key: {{key.key}}, value: {{key.value}}
  </li>
</ul>

답변

@Marton은 파이프가 각 변경 감지에 대해 새로운 컬렉션을 생성한다는 근거로 허용 된 답변 에 대해 중요한 반대 의견을 제시 했습니다. 대신 뷰가 다음과 같이 사용할 수있는 다양한 유틸리티 기능을 제공하는 HtmlService를 만듭니다.

@Component({
  selector: 'app-myview',
  template: `<div *ngFor="let i of html.keys(items)">{{i + ' : ' + items[i]}}</div>`
})
export class MyComponent {
  items = {keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3'};
  constructor(private html: HtmlService){}
}

@Injectable()
export class HtmlService {
  keys(object: {}) {
    return Object.keys(object);
  }
  // ... other useful methods not available inside html, like isObject(), isArray(), findInArray(), and others...
}

[angular] * ngFor를 사용하여 액세스 키 및 오브젝트 값

답변

답변

일하는 예

답변

답변

최신 정보

이전 버전

답변

답변

RC로 업데이트

답변