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

范围* ngFor let变量

2 个答案: