Angular 2 Alpha 28에서 몇 가지 작업을 시도하고 있으며 사전 및 NgFor에 문제가 있습니다.
TypeScript에 다음과 같은 인터페이스가 있습니다.
interface Dictionary {
[ index: string ]: string
}
JavaScript에서 이것은 데이터가있는 객체로 변환됩니다.
myDict={'key1':'value1','key2':'value2'}
나는 이것을 반복하고 이것을 시도하고 싶다.
<div *ngFor="(#key, #value) of myDict">{{key}}:{{value}}</div>
그러나 소용이 없었지만 아래 중 어느 것도 작동하지 않았습니다.
<div *ngFor="#value of myDict">{{value}}</div>
<div *ngFor="#value of myDict #key=index">{{key}}:{{value}}</div>
모든 경우에 “Unexpected token”또는 “Cannot find ‘iterableDiff’pipe support object”와 같은 오류가 발생합니다.
내가 여기서 무엇을 놓치고 있습니까? 더 이상 가능하지 않습니까? (첫 번째 구문은 Angular 1.x에서 작동합니다) 아니면 객체를 반복하는 구문이 다른가요?
답변
ng1의 구문을 지원하지 않는 것으로 보입니다.
Miško Hevery에 따르면 ( 참조 ) :
맵에는 키에 순서가 없으므로 반복을 예측할 수 없습니다. 이것은 ng1에서 지원되었지만 실수라고 생각하고 NG2에서 지원되지 않을 것입니다
계획은 mapToIterable 파이프를 갖는 것입니다.
<div *ngFor"var item of map | mapToIterable">
따라서 개체를 반복하려면 “파이프”를 사용해야합니다. 현재이를 수행하는 파이프 가 없습니다 .
해결 방법으로 다음은 키를 반복하는 작은 예입니다.
구성 요소:
import {Component} from 'angular2/core';
@Component({
selector: 'component',
templateUrl: `
<ul>
<li *ngFor="#key of keys();">{{key}}:{{myDict[key]}}</li>
</ul>
`
})
export class Home {
myDict : Dictionary;
constructor() {
this.myDict = {'key1':'value1','key2':'value2'};
}
keys() : Array<string> {
return Object.keys(this.myDict);
}
}
interface Dictionary {
[ index: string ]: string
}
답변
Angular 6.1.0+ 답변
다음과 같이 내장 keyvalue-pipe를 사용하십시오 .
<div *ngFor="let item of myObject | keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>
또는 다음과 같이 :
<div *ngFor="let item of myObject | keyvalue:mySortingFunction">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>
파일의 위치 mySortingFunction는 다음과 .ts같습니다.
mySortingFunction = (a, b) => {
return a.key > b.key ? -1 : 1;
}
Stackblitz : https://stackblitz.com/edit/angular-iterate-key-value
Angular 파이프는 모든 템플릿에서 즉시 작동하므로 어떤 모듈에도 등록 할 필요가 없습니다.
Javascript-Maps 에서도 작동합니다 .
답변
이 파이프를 사용해보십시오
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]);
}
}
<div *ngFor="#value of object | values"> </div>
답변
@obscur의 답변 외에도 다음 key과 같이 액세스 할 수있는 방법의 예가 있습니다.value @View 대한 예가 있습니다.
파이프:
@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;
});
}
}
전망:
<li *ngFor="let u of myObject |
keyValueFilter">First Name: {{u.key}} <br> Last Name: {{u.value}}</li>
따라서 개체가 다음과 같은 경우 :
myObject = {
Daario: Naharis,
Victarion: Greyjoy,
Quentyn: Ball
}
생성 된 결과는 다음과 같습니다.
이름 : Daario
성 : Naharis
이름 : Victarion
성 : Greyjoy
이름 : Quentyn
성 : Ball
답변
업데이트 : Angular는 이제 다음을 통해 json 객체를 통해 lopping하는 파이프를 제공합니다 keyvalue.
<div *ngFor="let item of myDict | keyvalue">
{{item.key}}:{{item.value}}
</div>
WORKING DEMO , 자세한 내용은 읽기
이전 (이전 버전의 경우) : 지금까지 내가 찾은 가장 좋은 / 가장 짧은 대답은 (구성 요소 측의 파이프 필터 또는 사용자 정의 기능 없음)입니다.
구성 요소 측면 :
objectKeys = Object.keys;
템플릿 측면 :
<div *ngFor='let key of objectKeys(jsonObj)'>
Key: {{key}}
<div *ngFor='let obj of jsonObj[key]'>
{{ obj.title }}
{{ obj.desc }}
</div>
</div>
답변
SimonHawesome의 탁월한 답변에 추가합니다 . 새로운 typescript 기능을 활용하는 간결한 버전을 만들었습니다. 나는 SimonHawesome의 버전이 근본적인 세부 사항을 설명하기 위해 의도적으로 장황하다는 것을 알고 있습니다. 파이프가 허위 값에 대해 작동하도록 조기 체크를 추가했습니다 . 예 :지도가null .
반복기 변환 (여기에서 수행됨)을 사용하면 임시 배열에 메모리를 할당 할 필요가 없기 때문에 더 효율적일 수 있습니다 (다른 답변 중 일부에서 수행됨).
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] }));
}
}
답변
다음은 여러 변환 (keyval, key, value)을 지원하는 위 답변 중 일부에 대한 변형입니다.
import { Pipe, PipeTransform } from '@angular/core';
type Args = 'keyval'|'key'|'value';
@Pipe({
name: 'mapToIterable',
pure: false
})
export class MapToIterablePipe implements PipeTransform {
transform(obj: {}, arg: Args = 'keyval') {
return arg === 'keyval' ?
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;
}
}
용법
map = {
'a': 'aee',
'b': 'bee',
'c': 'see'
}
<div *ngFor="let o of map | mapToIterable">{{o.key}}: {{o.value}}</div>
<div>a: aee</div>
<div>b: bee</div>
<div>c: see</div>
<div *ngFor="let o of map | mapToIterable:'keyval'">{{o.key}}: {{o.value}}</div>
<div>a: aee</div>
<div>b: bee</div>
<div>c: see</div>
<div *ngFor="let k of map | mapToIterable:'key'">{{k}}</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div *ngFor="let v of map | mapToIterable:'value'">{{v}}</div>
<div>aee</div>
<div>bee</div>
<div>see</div>
