1

Tengo un formulario con dos input columnas y filas introducir la descripción de la imagen aquí

y a través de estos dos datos creo una tabla de nxn y las relleno con datos aleatorios en una tabla:

introducir la descripción de la imagen aquí

Y quiero también tener la opción de ingresar los datos manuales, de esta forma: introducir la descripción de la imagen aquí

Pero como las filas y las columnas las agrego de forma dinámica, no se como crear un identificador para para cada input de esa tabla y enviarlas por medio de un NgForm a un método.

Así lo estoy manejando con los datos aleatorios:

    <form (ngSubmit)="ejecutarModelos(g.value)" #g="ngForm" *ngIf="mostrarMatriz && datos.manual">
  <h4 class="display-6">Matriz Manual:</h4>
  <table class="table table-bordered jumbotron">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col" *ngFor="let columna of arrayColumnas">Col. {{columna}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let fila of arrayFilas">
        <th>Fila {{fila}}</th>
        <td *ngFor="let obj of td.arrayRandom">{{obj[fila]}}</td>
      </tr>
    </tbody>
  </table>
</form>



  ejecutarRandom(f: NgForm) {
this.resultadoLagrange = f.value.columnas;
let nColumnas = 1 / f.value.columnas;
this.arrayColumnas = [];
this.arrayFilas = [];

for (let index = 1; index <= f.value.filas; index++) {
  this.arrayFilas.push(index);
}

for (let index = 1; index <= f.value.columnas; index++) {
  this.arrayColumnas.push(index);
  let obj = {}

  for (let index = 1; index <= this.arrayFilas.length; index++) {

    let first = index;
    obj[first] = this.getRandom(f.value.rangoMin, f.value.rangoMax);
  }

  this.td.arrayRandom.push(obj)

}

   this.td.arrayLagrnage = [...this.td.arrayRandom]
this.metotodoLagrange(this.td.arrayLagrnage, nColumnas);
this.mostrarMatriz = true;

};

1 respuesta 1

1

La idea es crear primero un arreglo de columnas. Luego crear las filas, considerando el número de columnas.

Para que se pueda editar la celda hay que agregar un input y hacer un model binding con el valor del objeto de esa celda. Y cuando no esté editando hay que mostrar directamente el valor con una interpolación.

Para lograr eso se agregan dos div dentro del td, uno para contener el input y el otro para contener la interpolación y se muestra uno o el otro dependiendo del valor de la propiedad editar del objeto de la celda.

A cada celda se le agrega un evento click, que al dispararse llama la función ocultarCeldas() la cual recorre toda la tabla y establece la propiedad editar de todos los objetos de las celdas a false y habilita la edición de la celda donde se produjo el evento.

Demo en vivo

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

@Component({
  selector: "my-app",
  template: `
    <table border="1">
      <th *ngFor="let col of columnas">{{ col }}</th>
      <tr *ngFor="let fila of filas">
        <td *ngFor="let celda of fila" (click)="ocultarCeldas(celda)">
          <div *ngIf="celda.editar">
            <input
              type="text"
              [(ngModel)]="celda.valor"
              (blur)="celda.editar = false"
            />
          </div>
          <div *ngIf="!celda.editar">
            {{ celda.valor }}
          </div>
        </td>
      </tr>
    </table>
  `
})
export class AppComponent {
  filas = [];
  columnas = [];

  constructor() {
    this.llenarAleatorio();
  }

  llenarAleatorio() {
    // entre 1 y 10
    let totalColumnas = Math.floor(Math.random() * 10 + 1);

    // crear las columnas
    for (let i = 0; i < totalColumnas; i++) {
      this.columnas.push(i);
    }

    //crear las filas entre 1 y 10
    let totalFilas = Math.floor(Math.random() * 10 + 1);

    for (let i = 0; i < totalFilas; i++) {
      let fila = [];

      for (let i = 0; i < totalColumnas; i++) {
        fila[i] = {
          valor: Math.floor(Math.random() * 100 + 1),
          editar: false
        };
      }
      this.filas.push(fila);
    }
  }

  ocultarCeldas(celda) {
    celda.editar = true;
    this.filas.forEach(f => {
      f.forEach(c => {
        if (c != celda) c.editar = false;
      });
    });
  }
}
1
  • Voy a intentarlo y te comento como me va el 12 nov. 2020 a las 12:36

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.