角度对象的多维数组

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 被用作 C# 中使用的 foreach，而我真正需要的是一个普通的 for 循环。我是角度和打字稿的新手。我怎样才能做到这一点？

Answer 1

试试下面的代码sn-p

<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