1

Hola mi problema es que tengo una tabla de comentarios:

HTML

<div id="comments" class="container container-fluid">
  <div class="table">
    <table id="target" class="table-responsive table-light table-bordered">
      <tbody>
        <tr *ngFor="let comment of comments">
          <td class="text-body text-capitalize">
            {{comment.user}} Has Say: &nbsp;
          </td>
          <td>
            <p [innerHTML]="comment.post_comment_content"></p>
            &nbsp;
            <span class="h6 clearfix uk-text-justify" *ngIf="this.identity.getUserLoged().user_id === comment.post_comment_author_id">
              <p class="small">
                <a style="cursor: pointer;"  class="text-lowercase">edit</a>
              </p>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Quisiera saber como puedo usar el evento (click) para que al hacer click en el texto edit este se pueda modificar en la misma linea. Tengo un ckeditor creado, donde podría coger los datos que se están seleccionando. Pero mi idea es crear algo un poco mas intuitivo, donde al hacer click en edit el texto en cuestión se vuelva editable.

<p class="small">
  <a style="cursor: pointer;"  class="text-lowercase">edit</a>
</p>

Hacedme saber si necesitáis que ponga parte del TS aquí y muchísimas gracias!

2
  • Hola, se me viene a la cabeza (no se que tan viable sea, en cuanto a términos de rendimiento) que utilices un campo oculto (ya sea textarea, input) que al momento de darle editar le muestras al usuario el campo y ocultas el párrafo de texto.
    – jecorrales
    el 4 jun. 2019 a las 13:32
  • @jecorrales si me parece una buena solucion pero aun no encuentro la forma de hacerlo llevo horas de pruebas fallidas el 4 jun. 2019 a las 13:43

1 respuesta 1

2

Como te decía, lo que puedes realizar es que tomas el id de la fila que estas iterando en tu ciclo o directiva *ngFor de Angular. Al tomarlo lo que generas es un cambio de sección, lo que antes era solo un texto ahora será un input o textarea. El ejemplo a continuación de lo que deberías hacer:

COMPONENTE HTML

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Nombre</th>
      <th>Código</th>
      <th>Precio</th>
      <th>Descripción</th>
      <th>Opción</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let producto of productos, index as id">
      <td>
        {{producto.id_producto}}
      </td>
      <td>
        {{producto.nombre_producto}}
      </td>
      <td>
        {{producto.codigo_producto}}
      </td>
      <td>
        {{producto.precio_producto}}
      </td>
      <td *ngIf="campo">
        <p>{{producto.descripcion_producto}}</p>
      </td>
      <td *ngIf="producto.id_producto == id_producto">
        <textarea rows="5">
          {{producto.descripcion_producto}}
        </textarea>
      </td>
      <td>
        <button (click)="evaluarCampo(producto)" *ngIf="campo">Editar</button>
        <button (click)="evaluarCampo(producto)" *ngIf="producto.id_producto == id_producto">Cancelar</button>
      </td>
    </tr>
  </tbody>
</table>

COMPONENTE TYPESCRIPT

export class AppComponent  {
  //Variables a implementar
  id_producto:any;
  campo:boolean = true;

  //Arreglo
  productos: any[] = [
    {
      'id_producto':'1',
      'nombre_producto': 'Apple iPhone X',
      'codigo_producto':'COD0001',
      'precio_producto':'25000',
      'descripcion_producto':'Desde un principio el objetivo de Apple fue crear un iPhone que fuera todo pantalla. Un dispositivo tan envolvente que prácticamente desapareciera al usarlo. Tan inteligente que respondiera a un toque, a una palabra o a una mirada.',
    },
    {
      'id_producto':'2',
      'nombre_producto':'Laptop Gamer HP - CX0001la',
      'codigo_producto':'COD0002',
      'precio_producto':'35000',
      'descripcion_producto':'La nueva HP Pavilion Gaming cuenta con la última tecnología en gráficos NVIDIA® GeForce® GTX™ y procesador Intel® para juegos, creación de contenidos y aplicaciones de alta productividad.',
    },
    {
      'id_producto':'3',
      'nombre_producto':'Laptop Alienware 15',
      'codigo_producto':'COD0003',
      'precio_producto':'45000',
      'descripcion_producto':'Experimente los juegos en un nivel completamente nuevo con la próxima generación de GPU NVIDIA GeForce GTX serie 10. Aproveche la potencia suficiente para alimentar las tarjetas gráficas de 100 W, así como los procesadores i5 HQ de la serie overclocking, que permiten juegos de 4k y están listos para la realidad virtual.',
    },
  ];

  //Metodo de evaluacion o accion del campo
  evaluarCampo(producto)
  {
    const id = producto.id_producto;

    console.log("ID: ", id);
    //Evaluamos el valor del campo, para saber que debemos mostrar
    if (this.campo == true)
    {
      //Ocultamos el campo
      this.campo = false;
      //Mandamos la variable con la que vamos a comparar el id de la fila
      this.id_producto = id;
    }
    else
    {
      //Dado que es verdadero, quiere decir que debemos mostrar el campo de texto
      this.campo = true;
      this.id_producto = '';
    }
  };
}

MEJORA

Para evitar que el campo se oculte en cada una de las iteraciones de la directiva, lo que debes realizar es el cambio del condicional que esconde el párrafo:

--- Antes: Le decíamos que ocultara todos los campos que estuvieran con el valor booleano (campo)

<td *ngIf="campo">
   <p>{{producto.descripcion_producto}}</p>
</td>

--- Después: Lo que le decimos es que no me vaya a ocultar la sección que sea diferente al identificador (id_producto) seleccionado por el cliente.

<td *ngIf="producto.id_producto != id_producto">
  <p>{{producto.descripcion_producto}}</p>
</td>

EJEMPLO FUNCIONAL

Te dejo un ejemplo de lo que adjunté en la respuesta, para que lo puedas modificar y/o adicionar de acuerdo a lo que tu propongas. clic aquí

Nota: Es solo un ejemplo de lo que debes realizar teniendo en cuenta lo que estás pidiendo en tu pregunta. Ya tendrías que jugar un poco con la lógica que requieras.

3
  • 1
    Muchas gracias, me ha funcionado pero cuando se habilita el campo de edición se esconden los demas campos dejandome editar mi comentario pero escondiendome todos los demas y quisiera algo como usar el index de mi NgFor para poder ejecutar la accion de editar en un punto especifico de la iteracion el 4 jun. 2019 a las 21:15
  • Juan he actualizado la respuesta y el ejemplo en stackbitz para que puedas verlo según lo que estás diciendo.
    – jecorrales
    el 5 jun. 2019 a las 13:41
  • 1
    muchas gracias de verdad que me has ayudado mucho el 11 jun. 2019 a las 14:21

Tu Respuesta

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

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