1

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: introducir la descripción de la imagen aquí

1 respuesta 1

1

Esta podría ser una aproximación, aunque hay muchas más, espero que te ayude.

He creado un pequeño ejemplo en el siguiente link. habría que modificar los estilos para que se vea como quieres, pero eso ya lo dejo de tu parte.

La aproximación ha sido la siguiente:

app-component.ts and app-component-html

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  abecedario = [
    "#", "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"
  ];

  results = [];

  ngOnInit() {
    this.chunks(this.abecedario, 3);
  }

  chunks(array, size) {
    let results = [];
    while (array.length) {
      results.push(array.splice(0, size));
    }
    this.results = results;
  }
}
<table>
	<colgroup>
		<col span="3" style="background-color:red; width: 20px">
	</colgroup>
	<tr *ngFor="let itemsRow of results; let i = index">
		<td><a href="">{{ itemsRow[0] }}</a></td>
		<td><a href="">{{ itemsRow[1] }}</a></td>
		<td><a href="">{{ itemsRow[2] }}</a></td>
	</tr>
</table>

He dividido el vector inicial en chunks o "trozos" de tamaño 3. Una vez hecho esto he guardado el resultado en un nuevo vector denominado results y después simplemente he sacado cada fila o "row" en la tabla del html.

3
  • 1
    Las respuestas no pueden ser sólo un enlace, deberías añadir el código y una explicación del mismo Commented el 12 nov. 2019 a las 11:44
  • De acuerdo, voy a ello. Commented el 12 nov. 2019 a las 11:44
  • Ok, gracias, probaré con lo tuyo a ver,
    – Adpesan
    Commented el 12 nov. 2019 a las 12:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.