角度的多维对象数组

Question

我有一个在我的类中声明的角度为2的对象的多维数组，如下所示：

export class MatrixComponent implements OnInit {
    private columnsNumber: number = 10;
    private linesNumber: number = 10;
    private grid: SquareComponent [][];

    constructor() {
        this.grid = [];
        var square = new SquareComponent();

        for (var i = 0; i < this.columnsNumber; i++) {
            this.grid[i] = [];

            for (var j = 0; j < this.linesNumber; j++) {
                this.grid[i][j] = new SquareComponent();            
            }
        }
    }

    ngOnInit() {
    }
}

使用多维网格数组，我想表示HTML中数组中的每个Square组件。类似于以下内容：

<div class="table-responsive">
    <table class='table'>        
        <tbody>
            <tr *ngFor="let row of grid[i]">
                <th *ngFor="let column of grid[j]">
                    <app-square></app-square>
                </th>
            </tr>
        </tbody>
    </table>
</div>

当然上面的代码不起作用！我想ngFor用作foreach用于C＃，我真正需要的是一个正常的for循环。我是角度和打字稿的新手。我怎样才能做到这一点？

Answer 1

请尝试以下代码段

<div class="table-responsive">

    <table class='table'>        
        <tbody>
            <tr *ngFor="let row of grid;let i=index">
                <th *ngFor="let column of row;let j=index">
                    <app-square></app-square>
                    <!-- {{i}}+{{j}} -->
                </th>
            </tr>
        </tbody>
    </table>
</div>

DEMO