Creating a table with nested lists in Angulardart

Issue

I’m trying to build a table representing a List<List<int>> in Angulardart.

This is the content of my template file:

<table>
    <tbody>
        <tr *ngFor="#row of cells">
            <td *ngFor="#cell of row">
                <input type="number" #cell (keyup)="0"/>
            </td>
        </tr>
    </tbody>
</table>

And the list is initialized like this:

class Grid {
    const GRID_SIZE = 9;
    List<List<int>> cells = new List(GRID_SIZE);

    Grid() {
        cells.forEach((x) => x = new List(GRID_SIZE));
    }
}

However, in the rendered HTML I only see 9 <tr> empty tags, with no <td>s inside.

What am I missing?

Solution

Turns out the issue was in the grid initialization: the correct initialization code to have it filled with lists of zeroes is

cells.fillRange(0, cells.length, new List.filled(GRID_SIZE, 0));

The initialization code in the question only filled the main list with GRID_SIZE nulls.

Answered By – Raibaz

Answer Checked By – Marilyn (FlutterFixes Volunteer)