for...in

Angular에서 template에서 배열의 데이터를 표현하기 위해 사용하는 [ngFor] 라는 지시자(Directive)가 있다.

Angular 공식 홈페이지에서 나오는 ngFor에 대한 설명은 다음과 같다.

@Directive({ selector: '[ngFor][ngForOf]' })
class NgForOf <T> implements DoCheck, OnChanges {
  constructor(_viewContainer: ViewContainerRef, _template: TemplateRef<NgForOfContext<T>>, _differs: IterableDiffers)
  ngForOf: NgIterable<T>
  ngForTrackBy: TrackByFunction<T>
  set ngForTemplate: TemplateRef<NgForOfContext<T>>
  ngOnChanges(changes: SimpleChanges): void
  ngDoCheck(): void
}

사용하는법 또한 나와있는데

<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
   {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>

이런식으로 사용한다

ngForOf는 배열(json 및 object)을 순회하기 위해 이용하는데

배열(json 및 object)) key와 value 이런식으로 있다면 

key1	key2	key3	key4
data1	data2	data3	data4

ngForOf는 value를 표현하며 사용한다.

하지만 Angular를 사용하면서 value가 아닌 key를 표현 및 이용하고 싶다면

ngForIn이라는 것을 사용해야한다.

ngForIn은 Angular 공식 홈페이지에는 없고 따로 개인적으로 사용할 수 있게 지시자(Directive)를 만들어서 사용해야한다.

import { SimpleChanges, Directive, SimpleChange, OnChanges, Input } from "@angular/core";
import { NgForOf } from "@angular/common";
interface NgForInChanges extends SimpleChanges {
ngForIn?: SimpleChange;
ngForOf?: SimpleChange;
}
@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);
}
}
}

를 선언하고 ngModule에 추가한 후 

 <ng-container *ngfor="let flag in flagArray[i];" >

이런식으로 하용하면 key를 가지고 순회할 수 있다.

참고 : 

https://stackoverflow.com/questions/45151334/can-ngforin-be-used-in-angular-4?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

 

https://medium.com/@jsayol/having-fun-with-angular-extending-ngfor-to-support-for-in-f30c724967ed