CODEWITHSUNDEEP
htmldartangular-dart
Raibaz
Raibaz

Reputation: 9710

Creating a table with nested lists in Angulardart

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?

Upvotes: 1

Views: 311

Answers (2)

Zied Hamdi
Zied Hamdi

Reputation: 2662

When you call this line:

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

You are actually replacing x with a new value : you are not intervening inside x, but you created a new one.

List<String> myList = ['my', 'original', 'list'];

void yourForLoopFunctionSimulation( List<String> x ) {
  x = new List.filled(GRID_SIZE, 0);
  //you can work with the new x value here, but it won't change the argument that was passed to you
}

//if you run 
yourForLoopFunctionSimulation( myList );
print( myList ); // result : ['my', 'original', 'list'];

Upvotes: 0

Raibaz
Raibaz

Reputation: 9710

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.

Upvotes: 5

Related Questions