ngForInは角度4で使用できますか？

Question

*ngForを使用してオブジェクトのプロパティを反復しようとしていますが、inを使用しています。それは「李」の既知のプロパティではありませんので、

は「ngForIn」にバインドできません：私はこの

@Controller({ 
    selector: 'sample-controller', 
    template: ` 
    <ul> 
     <li *ngFor="let i in obj"> 
     <b>{{i}}</b>: {{obj[i]}} 
     </li> 
    </ul>` 
}) 
class SampleController { 
    obj = {a: 1, b: 2} 
} 

をしようとすると、私はエラーメッセージが表示されます。

私はこのコンポーネントの@NgModuleのimportsセクションでFormsModuleとBrowserModuleを含んでいました。

にngForInを使用することはできますか？そうでない場合は、慣用的な方法がありますか？

Answer 1

あなたがそのような目的のために特別な指示を作成することができます。それはNgForOf<T>指令に基づいて行われます：

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); 
    } 
    } 
} 

Plunker Example

Answer 2

最も簡単な方法は、Object.values()とObject.keys()を使用してオブジェクトを配列に変換することです。たとえば、this plunkerをご覧ください。

キーにアクセスする場合は値に加えて、*ngForにインデックスを含めることができます。

テンプレート：

<ul> 
    <li *ngFor="let item of array; let index = index;"> 
    <b>{{keys[index]}}</b> value: {{item}}, index: {{index}} 
    </li> 
</ul> 

コンポーネント活字体：AJT_82コメントで述べたように

export class App { 
    obj = {a: 1, b: 2} 
    array = []; 
    keys = []; 
    constructor() { 
    } 

    ngOnInit() { 
    this.array = Object.values(this.obj); 
    this.keys = Object.keys(this.obj); 
    } 
}