範囲は、私はこのようなngFor *巣にしようとした

Question

変数ましょうngFor：

は

<div *ngFor="let cubeArray of cubeMatrice"> 
    <my-cube *ngFor="let cube of cubeArray"> 
    </my-cube> 
    </div> 

しかしそれは動作しません。変数cubeArrayはその特定のdiv tagにのみ関連していますか？

私はここで見つけた他の解決策も試しました：How to use Angular2 templates with *ngFor to create a table out of nested arrays?しかし、これはvanilla htmlタグでは機能しません。

間にコンポーネントを使用して問題を解決できることはわかっています。ネストされたforsが何らかの理由で可能かどうかを知りたいだけです。 cubeArrayの範囲はdivだけを変更できますか？

Answer 1

あなたが直面している問題は何ですか？

Plunkerで試してみました。

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: `<h3 class="title">Basic Angular 2</h3> 
    <hr /> 
    <div *ngFor="let cubeArray of cubeMatrice"> 
    <my-cube *ngFor="let cube of cubeArray" [var1]="cube.prop1" > 
    </my-cube> 
    </div> 
    ` 
    }) 
    export class AppComponent { 
    cubeMatrice = [ 
    [{prop1: 'val1'},{prop1: 'val2'}], 
    [{prop1: 'val3'},{prop1: 'val4'}] 
    ] 

    constructor(){} 
} 

@Component({ 
selector: 'my-cube', 
template: `{{var1}} 
    ` 
}) 
export class MyCubeComponent { 
    @Input() var1; 
    constructor(){} 
} 

これが役立ちますように！

Answer 2

cubeArrayは、特定のdivおよびネストされたngFor可能です

チェックこのPlunker