Tengo la siguiente función: -
uploadPhoto() { var nativeElement: HTMLInputElement = this.fileInput.nativeElement; this.photoService.upload(this.vehicleId, nativeElement.files[0]) .subscribe(x => console.log(x)); }sin embargo, en nativeElement.files[0], recibo un error de mecanografiado, "El objeto es posiblemente 'nulo'". ¿Alguien puede ayudarme a resolver este problema?
Traté de declarar nativeElement como un valor nulo, sin embargo, no logré tener éxito.
Gracias por su ayuda y tiempo.
files se define como FileList | null por lo que puede ser null .
Debe verificar si es null (usando un if ) o usar un "operador de aserción no nulo" ( ! ) si está seguro de que no es null :
if(nativeElement.files != null) { this.photoService.upload(this.vehicleId, nativeElement.files[0]) .subscribe(x => console.log(x)); } //OR this.photoService.upload(this.vehicleId, nativeElement.files![0]) .subscribe(x => console.log(x));Nota:
El "operador de aserción no nulo" no realizará ninguna verificación en tiempo de ejecución, solo le dice al compilador que tiene información especial y sabe que nativeElement.files no será null en tiempo de ejecución.
Si nativeElement.files es null en tiempo de ejecución, generará un error. Este no es el operador de navegación segura de otros idiomas.
TypeScript 3.7 se lanzó el 11/2019. Ahora se admite " Encadenamiento opcional ", esta es la forma más fácil y segura de trabajar con valores potencialmente anulables:
Simplemente escribes:
nativeElement?.file?.name¡ Observe el signo de interrogación ! Verifican nulo/indefinido y solo devuelven el valor, si ninguna de las propiedades (encadenadas con puntos) es nulo/indefinido.
En vez de
if(nativeElement!=null && nativeElement.file != null) { .... } Pero imagina algo más complejo como esto: crm.contract?.person?.address?.city?.latlang que de otro modo sería mucho más detallado de verificar.
Además de todas las respuestas mencionadas anteriormente, aún si el usuario no desea las comprobaciones nulas estrictas en su aplicación, simplemente podemos deshabilitar la propiedad strictNullChecks en nuestro archivo tsconfig.json .
{ ... "angularCompilerOptions": { "strictNullChecks": false, ... } }