0

Estoy realizando una pequeña aplicación con Angular gracias a un tutorial de youtube que consiste en un "CRUD" de tareas, a la vez estoy haciendo uso del LocalStorage del navegador para almacenar los datos, el "CRUD" solo cuenta con las opciones de agregar, visualizar y eliminar tareas, pero no posee una opción actualizar tareas y eso es lo que precisamente estoy tratando de hacer.

introducir la descripción de la imagen aquí

Estos son los componentes que se están utilizando,además de un servicio y una interfaz en la carpeta modelo.

introducir la descripción de la imagen aquí

Y así luce la aplicación

La plantilla del formulario es el siguiente: (task-form.component.html)

 <div class="card ">
<div class="card-body">
    <form (submit)="addTask(TaskT,TaskD)">
        <div class="form-group">

            <input type="text" placeholder="Task title" class="form-control" #TaskT>

        </div>

        <div class="form-group">
            <textarea cols="30" rows="10" placeholder="Task Description" class="form-control" #TaskD></textarea>
        </div>
            <button class="btn btn-primary btn-block">Send</button>

    </form>
</div>

Al activar el evento "Submit" del formulario se envían los inputs como parámetros los cuales son título y descripción.

Archivo task-form.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { TaskService } from '../../services/task.service';
import { Task } from '../../models/task';


@Component({
selector: 'app-task-form',
templateUrl: './task-form.component.html',
styleUrls: ['./task-form.component.css']
})
export class TaskFormComponent implements OnInit {

 constructor(public taskS:TaskService) {



}

ngOnInit() {
}

@Input() task: Task;



addTask(TaskT:HTMLInputElement,TaskD:HTMLInputElement){



    this.taskS.addTask({
        title: TaskT.value,
        description: TaskD.value,
        hide: true


    })

    TaskT.value = '';
    TaskD.value = '';
    TaskT.focus();

    return false;
}



}

Además utilizo un servicio para el procesamiento y almacenamiento de datos.

Archivo task.service.ts

import { Injectable } from '@angular/core';
import { Task } from '../models/task';



@Injectable({
providedIn: 'root'
})
export class TaskService {

task: Task[];



constructor() { 

this.task = [


];


}

addTask(taskOne: Task){
this.task.push(taskOne);
let tasks: Task[] = [];
if (localStorage.getItem('Tasks')==null) {
  tasks.push(taskOne);
  localStorage.setItem('Tasks',JSON.stringify(tasks));
}

else{
  tasks = JSON.parse(localStorage.getItem('Tasks'));
  tasks.push(taskOne);
  localStorage.setItem('Tasks',JSON.stringify(tasks));
}

}

updateTask(taskOne: Task){
for(let i = 0; i<this.task.length; i++){
  if (taskOne==this.task[i]) {


  }
}
}

deleteTask(taskOne:Task){
for(let i = 0; i< this.task.length; i++){

  if (taskOne==this.task[i]) {
    this.task.splice(i,1);
    localStorage.setItem('Tasks', JSON.stringify(this.task));
  }

}
}

getTasks(){
if (localStorage.getItem('Tasks')==null) {
  return this.task;
}

else{
  this.task = JSON.parse(localStorage.getItem('Tasks'));
  return this.task;
}


}
}

Utilizo también un componente task.component para cada una de las tareas que se van guardando, agregando así sus respectivas opciones agregar,mostrar (descripción de tarea), actualizar y eliminar.

Archivo (task.component.html)

<div class="card mb-2">
<div class="card-header d-flex justify-content-between aling-item-center">
    {{task.title}}
    <div>
        <button class="btn btn-primary" (click)="task.hide = !task.hide">Show</button>
        <button class="btn btn-success" (click)="updateTask(task)">Update</button>
        <button class="btn btn-danger" (click)="deleteTask(task)">Delete</button>
    </div>
</div>

<div class="card-body" [hidden]="task.hide">
        {{task.description}}
    </div>

Archivo (task.component.ts)

import { Component, OnInit, Input } from '@angular/core';
import { Task } from '../../models/task';
import { TaskService } from '../../services/task.service';


@Component({
selector: 'app-task',
templateUrl: './task.component.html',
styleUrls: ['./task.component.css']
})
export class TaskComponent implements OnInit {

constructor(public taskS:TaskService) { }

ngOnInit() {
}
@Input() task: Task;





deleteTask(task:Task){

if (confirm('Are you sure you want delete this task?')) {
    this.taskS.deleteTask(task);
}

}


updateTask(taskOne:Task){

this.taskS.updateTask(taskOne);
console.log(taskOne);


}



}

Y este es mi interfaz para el modelo de datos de mis tareas:

export interface Task{

title: string;
description: string;
hide: true;

}

Cuando doy click en el boton "Update" de una tarea que quiero editar, obtengo la tarea como un objeto.

introducir la descripción de la imagen aquí

Pero en este punto es en donde tengo problemas, ya que he intentado darles los valores de "Titulo" y "Descripción" respectivamente a los inputs del form para editar la tarea, lo cual no he logrado a causa de que en el método "updateTask" del archivo task.component.ts he logrado obtener mi tarea a editar como un objeto pero no la puedo asignar a los inputs a causa de que estos inputs están el el componente task-form.component y no en el componente task.component que es en donde he creado el método.

Y lo que quiero justamente es que al seleccionar el botón "Update" de la tarea que yo elija, me muestre los respectivos datos de la tarea en los inputs del formulario listos para modificarlos y posteriormente guardar los cambios realizados en la tarea.

1 respuesta 1

1

Observo que tienes un problema al momento de querer mostrar la informacion que ya tienes almacenada en tu base de datos para poder ser editada y volverla a mandar.

Hace tiempo hice un CRUD como tu para la práctica y obtuve los datos mediante un ngModel, así como puedes enviar data con ngModel puedes obtenerla pero al parecer tu no estas usando el ngForm pero te invito a que consultes un poco sobre hacer un Formulario así ya que utilizas Angular y deberías aprovechar todo lo que te ofrece el Framework por ejemplo sus formularios como menciono.

NGMODEL

Te invito a que indages mas sobre como trabaja ngModel que es muy fácil traer la data que ya tienes almacenada...

Solo tendrías que enlazar a tu modelo la data que obtienes de la petición y con ngModel muestras la data en el html en tu caso cuando enlaces el modelo podría quedar así esto es solo un ejemplo...

<div class="card ">
    <div class="card-body">
        <form (submit)="addTask(TaskT,TaskD)">
            <div class="form-group">

                <input [(ngModel)]="modelo.nombre" name="nombre" type="text" placeholder="Task title" class="form-control" #TaskT>

            </div>

            <div class="form-group">
                <textarea [(ngModel)]="modelo.descripcion" name="descripcion" cols="30" rows="10" placeholder="Task Description" class="form-control" #TaskD></textarea>
            </div>
                <button class="btn btn-primary btn-block">Send</button>

        </form>
    </div>

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.