*ngFor let 变量的范围

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?，但这不适用于原始 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