0

//En el "this.lista" hay un error que dice "El tipo 'void' no se puede asignar al tipo 'Lista'." // En el "listaId" del "this.lista" también esta el error "No se puede asignar un argumento de tipo "string | null" al parámetro de tipo "string | number". El tipo 'null' no se puede asignar al tipo 'string | number'."

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Lista } from 'src/app/models/lista.model';
import { DeseosService } from 'src/app/services/deseos.service';

@Component({
  selector: 'app-agregar',
  templateUrl: './agregar.page.html',
  styleUrls: ['./agregar.page.scss'],
})
export class AgregarPage {


  lista: Lista;

   constructor(private deseosService: DeseosService,
              private route: ActivatedRoute) { 

    const listaId = this.route.snapshot.paramMap.get('listaId');


      this.lista = this.deseosService.obtenerLista( listaId ); 

  }

}

//------"lista" esta definido acá -------//

 import { ListaItem } from "./lista-item-model";



export class Lista {


    id: number;
    titulo: string;
    creadaEn: Date;
    terminadaEn: any;
    terminada: boolean;
    items: ListaItem[];

    constructor( titulo: string ){
    
        this.titulo = titulo;

        this.creadaEn = new Date();
        this.terminada = false;
        this.items = [];

        this.id = new Date().getTime();
    }
}

//---------este es el codigo de "src/app/services/deseos.service"--------//

import { Injectable } from '@angular/core';
import { Lista } from '../models/lista.model';

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

  listas: Lista [] = [];

  constructor() { 

    this.cargarStorage();

  }

  crearLista( titulo: string ){

    const nuevaLista = new Lista(titulo);
    this.listas.push( nuevaLista );
    this.guardarStorage();

    return nuevaLista.id;

  }

  obtenerLista( id: string | number ){

    id = Number(id);

    this.listas.find( listaData => {
      return listaData.id === id;    
    });
  }

  guardarStorage(){

    localStorage.setItem('data', JSON.stringify(this.listas));

  }

  cargarStorage(){
    const lista = localStorage.getItem('data');
    if( lista){
      this.listas = JSON.parse(lista);
    }  

  }

}
1
  • Falta que muestres el código de src/app/services/deseos.service
    – Yussef
    Commented el 26 oct. 2023 a las 3:48

1 respuesta 1

1

Tienes 2 problemas:

1.- this.route.snapshot.paramMap.get('listaId') puede entregar un valor nulo o string tal como lo indica la documentación

Entonces tu tienes:

const listaId = this.route.snapshot.paramMap.get('listaId');

donde listaId será del tipo null | string, en cambio tu función obtenerLista acepta como argumento el tipo string | number.

2.- El otro problema es que obtenerLista no está retornando algo, es decir es vacio void

Para corregir el primer problema basta con agregar el null como un posible tipo del argumento de la función y el segundo problema se resuelve con agregar return

obtenerLista( id: string | number | null){

  id = Number(id);
  return this.listas.find( listaData => listaData.id === id);
}

Llegado a este punto te encuentras con un par de dilemas:

  • Si id==null entonces al convertirlo a número es cero, ya que Number(null)==0
  • Que el id ingresado no exista en el array, entonces el find retornará undefined

Este es un problema muy comun en la programación. Tu podrias simplemente retornar null o undefined para estos casos y hacer que lista acepte esos tipos -> lista: Lista | null | undefined; pero esto solo arrastra el problema y eventualmente en algún lado debes validarlo. Otra forma sería arrojar una excepción, algo así:

obtenerLista( id: string | number | null) : Lista {
 if(id == null) throw new Error("Id es nulo");

 id = Number(id);
 let resp = this.listas.find( listaData => listaData.id === id);

 if(resp) return resp;

 throw new Error("Item no está en el array");
}

Y luego en AgregarPage

  lista: Lista;

  constructor(private deseosService: DeseosService,
              private route: ActivatedRoute) { 

    const listaId = this.route.snapshot.paramMap.get('listaId');

    try{
      this.lista = this.deseosService.obtenerLista( listaId ); 
    }
    catch(err){
       console.error(err);
       //Aquí tomas acciones para alertar que ha ocurrido un problema, puede ser un mensaje al usuario
    }
}
5
  • Agregue lo que me dijiste. Ahora me tira error en el "this.lista" que dice "El tipo 'Lista | never[] | undefined' no se puede asignar al tipo 'Lista'. El tipo 'undefined' no se puede asignar al tipo 'Lista'." Commented el 26 oct. 2023 a las 4:36
  • @MisaelDuré cuando llamas a la función obtenerLista que es lo que esperas obtener: alternativas (1) Un solo objeto del tipo lista o (2) un array de objetos ???
    – Yussef
    Commented el 26 oct. 2023 a las 4:50
  • Creo que un objeto tipo lista. Perdón mi ignorancia, estoy aprendiendo jsjs Commented el 26 oct. 2023 a las 5:08
  • @MisaelDuré He editado la respuesta, espero esto te ayude
    – Yussef
    Commented el 26 oct. 2023 a las 6:28
  • Muchas gracias!!! Ya esta funcionando!! Commented el 26 oct. 2023 a las 7:26

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.