1

¿cómo están?, En el momento me encuentro aprendiendo Angular y entre ello, estoy haciendo un CRUD en el cual estoy siguiendo este video CRUD en Angular pero en esa parte exactamente del video tengo un error y no he podido solucionarlo en la parte de this.value = navigation?.extras?.state;

me aperece

Type '{ [k: string]: any; } | undefined' is not assignable to type 'null'. Type 'undefined' is not assignable to type 'null'.ts(2322)

he revisado la siguiente solucion, pero no he dado dar con la solucion Typescript: Type 'string | undefined' is not assignable to type 'string'

Este es mi codigo

edit.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

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

  value = null;

  constructor(private router: Router) { 
    const navigation = this.router.getCurrentNavigation();
    this.value = navigation?.extras?.state;
  }

  ngOnInit(): void {
  }

}

list.component.ts

import { Component, OnInit } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
})
export class ListComponent implements OnInit {
  navigationExtras: NavigationExtras = {
    state: {
      value: null,
    },
  };

  constructor(private router: Router) {}

  ngOnInit(): void {}

  onGoToEdit(item: any): void {
    this.navigationExtras!.state!['value'] = item;
    this.router.navigate(['edit'], this.navigationExtras);
  }

  onGoToSee(item: any): void {
    this.navigationExtras!.state!['value'] = item;
    this.router.navigate(['details'], this.navigationExtras);
  }

  onGoToDelete(item: any): void {
    alert('Deleted');
  }
}

Si me pudieran ayudar con la solución estaría agradecido gracias.

3
  • yo de ts no entiendo nada pero capaz si le metes un this.value = navigation?.extras?.state || null; ahi te ahorras el problema si llega undefined, no?
    – Agustin G.
    Commented el 13 jun. 2022 a las 20:34
  • no, sigue igual :( , aparece Commented el 13 jun. 2022 a las 20:38
  • Type '{ [k: string]: any; } | null' is not assignable to type 'null'. Type '{ [k: string]: any; }' is not assignable to type 'null Commented el 13 jun. 2022 a las 20:39

1 respuesta 1

0

En el código del tutorial que seguís es para la versión 11 ahora hay restricciones en tsconfig.json que hacen que el código tenga en cuenta las asignaciones que comentas.

Cuando un valor es nulo o indefinido, debemos probar esos valores antes de usar métodos o propiedades con ese valor. Al igual que verificar si no está definido antes de usar una propiedad opcional los valores que pueden ser nulos o indefinidos no se pueden acceder normalmente, y los valores nulos e indefinidos no se pueden asignar a una propiedad de cualquier tipo si

strictNullChecks esta en on Podes ver la teoría de como tener esto en cuenta en:

strictNullChecks on

También la forma de trabajar con uniones de tipos estrechándolos ( Narrowing) mediante la comprobación de su tipo con typeof

Para Non-null Assertion Operador (Postfix !):

TypeScript también tiene una sintaxis especial para eliminar valores nulos e indefinidos de un tipo sin realizar ninguna verificación explícita. operador! después de cualquier expresión es efectivamente una afirmación de tipo de que el valor no es nulo o indefinido

Son algunas de las cosas a tener en cuenta para que el código de tu ejemplo funcione en las nuevas versiones de Angular

----------------------------------------------
src/app/shared/components/employee-form/employee-form.component.ts:15:3 - error TS2564: Property
 'employeeForm' has no initializer and is not definitely assigned in the constructor.
Lo solucionamos con ! Escritura ! después de cualquier expresión es efectivamente
 una afirmación de tipo de que el valor no es nulo o indefinido:
 employeeForm!: FormGroup
-----------------------------------

src/app/shared/components/employee-form/employee-form.component.ts:38:50 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'.
const employeeId = this.employee?.id || null;
      this.employeesSvc.onSaveEmployee(employee, employeeId!);
-----------------------------------------------------------------------
src/app/shared/components/employee-form/employee-form.component.ts:50:14 - error TS2531: Object is possibly 'null'.
isValidField(field: string): string {
    const validatedField = this.employeeForm.get(field);
    return (!validatedField?.valid && validatedField?.touched)
      ? 'is-invalid' : validatedField?.touched ? 'is-valid' : '';
  }
------------------------------------------------------------------
otro hay varios con lo mismo
onGoToEdit(): void {
    if ( this.navigationExtras.state?.value === 'undefined') {
      this.navigationExtras.state.value = this.employee;
      this.router.navigate(['edit'], this.navigationExtras);
    }

else{
// o de acuerdo a lo que se requiera
//this.navigationExtras.state!.value = this.employee;
      //this.router.navigate(['edit'], this.navigationExtras);
}
    
  }
----------------------------------
otro
async onGoToDelete(): Promise<void> {
    try {
      await this.employeesSvc.onDeleteEmployees(this.employee?.id!);
      alert('Deleted');
      this.onGoBackToList();
    } catch (err) {
      console.log(err);
    }
  }

  onGoBackToList(): void {
    this.router.navigate(['list']);
  }


}
--------------------------
otro con 
 src/app/app.module.ts:25:49 - error TS2339: Property 'firebaseConfig' does not exist on type '{ production: boolean; }'.

25     AngularFireModule.initializeApp(environment.firebaseConfig)
lo debe de haber explicado en el tutorial o podes consultar esta pregunta que respondieron
https://stackoverflow.com/a/44033177/8957405

Aplique las correcciones para que pueda funcionar en el código que muestro salvo la ultima con respecto a firebase para eso ya hay una una forma de configuración en firebaseConfig

El codigo del tutorial con las correcciones anteriores

tutorial También hay otras formas de asignar null y evitar que no lo acepte Angular por ejemplo

const nulo={}as NavigationExtras;
    nulo?.state?.value!='hola'
0

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.