estoy haciendo un curso de Angular4 y me han mandado hacer que la tabla 3x9 con el símbolo # más las 26 letras del abecedario que ya tenía creada de una práctica anterior hacerla igual pero usando un ngFor. El caso es que ya he probado de un montón de maneras y no hay modo de que me salga. Este es el código como lo tengo ahora en el HTML:
<table>
<tr>
<td><a href="">{{letra0.valor}}</a></td>
<td><a href="">{{letra1.valor}}</a></td>
<td><a href="">{{letra2.valor}}</a></td>
</tr>
<tr>
<td><a href="">{{letra3.valor}}</a></td>
<td><a href="">{{letra4.valor}}</a></td>
<td><a href="">{{letra5.valor}}</a></td>
</tr>
<tr>
<td><a href="">{{letra6.valor}}</a></td>
<td><a href="">{{letra7.valor}}</a></td>
<td><a href="">{{letra8.valor}}</a></td>
</tr>
<tr>
<td><a href="">{{letra9.valor}}</a></td>
<td><a href="">{{letra10.valor}}</a></td>
<td><a href="">{{letra11.valor}}</a></td>
</tr>
<tr>
<td><a href="">{{letra12.valor}}</a></td>
<td><a href="">{{letra13.valor}}</a></td>
<td><a href="">{{letra14.valor}}</a></td>
</tr>
<tr>
<td><a href="">{{letra15.valor}}</a></td>
<td><a href="">{{letra16.valor}}</a></td>
<td><a href="">{{letra17.valor}}</a></td>
</tr>
<tr>
<td><a href="">{{letra18.valor}}</a></td>
<td><a href="">{{letra19.valor}}</a></td>
<td><a href="">{{letra20.valor}}</a></td>
</tr>
<tr>
<td><a href="">{{letra21.valor}}</a></td>
<td><a href="">{{letra22.valor}}</a></td>
<td><a href="">{{letra23.valor}}</a></td>
</tr>
<tr>
<td><a href="">{{letra24.valor}}</a></td>
<td><a href="">{{letra25.valor}}</a></td>
<td><a href="">{{letra26.valor}}</a></td>
</tr>
Y este el TS:
export class LadoComponent {
public letra0:Lado;
public letra1:Lado;
public letra2:Lado;
public letra3:Lado;
public letra4:Lado;
public letra5:Lado;
public letra6:Lado;
public letra7:Lado;
public letra8:Lado;
public letra9:Lado;
public letra10:Lado;
public letra11:Lado;
public letra12:Lado;
public letra13:Lado;
public letra14:Lado;
public letra15:Lado;
public letra16:Lado;
public letra17:Lado;
public letra18:Lado;
public letra19:Lado;
public letra20:Lado;
public letra21:Lado;
public letra22:Lado;
public letra23:Lado;
public letra24:Lado;
public letra25:Lado;
public letra26:Lado;
constructor() {
this.letra0 = new Lado('#');
this.letra1 = new Lado('A');
this.letra2 = new Lado('B');
this.letra3 = new Lado('C');
this.letra4 = new Lado('D');
this.letra5 = new Lado('E');
this.letra6 = new Lado('F');
this.letra7 = new Lado('G');
this.letra8 = new Lado('H');
this.letra9 = new Lado('I');
this.letra10 = new Lado('J');
this.letra11 = new Lado('K');
this.letra12 = new Lado('L');
this.letra13 = new Lado('M');
this.letra14 = new Lado('N');
this.letra15 = new Lado('O');
this.letra16 = new Lado('P');
this.letra17 = new Lado('Q');
this.letra18 = new Lado('R');
this.letra19 = new Lado('S');
this.letra20 = new Lado('T');
this.letra21 = new Lado('U');
this.letra22 = new Lado('V');
this.letra23 = new Lado('W');
this.letra24 = new Lado('X');
this.letra25 = new Lado('Y');
this.letra26 = new Lado('Z');
}
} La tabla actualmente está así y quiero que se quede igual pero usando un ngFor (subiría imagen, pero no me deja):
A B
C D E F G H I J K L M N O P Q R S T U V W X Y Z
La tabla sería así, que antes no he podido subirla porque no me dejaba: