I have an array of 2D objects used for creating a clickable HTML editor (Tile editor). Each object in the array contains information about which image to display.
interface Tile {
id: number,
image: string,
category?: number
skin?: string
schema?: string
}
tileEditor =
[ row: {Tile, Tile, Tile, Tile},
row: {Tile, Tile, Tile, Tile},
row: {Tile, Tile, Tile, Tile} ]
This is how it looks like in HTML:
<table>
<tr *ngFor="let rows of tileEditor">
<td *ngFor="let cell of rows.row" (mousedown)="canvasDown(cell)">
<img src="{{ cell.image }}" />
</td>
</tr>
</table>
The goal is to replace an empty Tile object with the selected Tile object upon clicking. However, updating each property individually can be cumbersome, as demonstrated in the canvasDown(tile: Tile) function.
In essence, I wish to achieve this functionality in canvasDown(tile: Tile):
canvasDown(tile: Tile) {
tile = this.selectedTile
}
Is there a way to accomplish this without just updating the reference copy?
Any insights or suggestions would be greatly appreciated. Thank you!