TS2531: Object is possibly ‘null’

by

files is defined to be FileList | null so it can be null.

You should either check for null (using an if) or use a “Non-null assertion operator” (!) if you are sure it is not 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));

Note:

The “Non-null assertion operator” will not perform any runtime checks, it just tells the compiler you have special information and you know nativeElement.files will not be null at runtime.

If nativeElement.files is null at runtime, it will generate an error. This is not the safe navigation operator of other languages.

More Related Contents:

  1. How to detect change in typescript object in angular 6
  2. How do I create a singleton service in Angular 2?
  3. Call child component method from parent class – Angular
  4. How can I unit test a component that uses the Router in Angular?
  5. document.getElementById replacement in angular4 / typescript?
  6. localStorage is not defined (Angular Universal)
  7. Angular 6: saving data to local storage
  8. Page is part of the declarations of 2 modules: Error in ionic build prod
  9. Angular 4/5/6 Global Variables
  10. Uncaught Error: Unexpected directive ‘MyComboBox’ imported by the module ‘AppModule’. Please add a @NgModule annotation
  11. Angular 2 Read More Directive
  12. When to use Interface and Model in TypeScript / Angular
  13. How to display the app version in Angular?
  14. Angular 4 checkbox change value
  15. Debug & Run Angular2 Typescript with Visual Studio Code?
  16. Angular @ViewChild() error: Expected 2 arguments, but got 1
  17. Best way to import Observable from rxjs
  18. Ionic2/Angular2 – Read a custom config file
  19. Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?
  20. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  21. FormBuilder group is deprecated
  22. angular’s ng-init alternative in Angular 2
  23. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  24. How to return observable from subscribe
  25. How to mock Angular 4.3 httpClient an error response in testing
  26. Angular 2 creating reactive forms with nested components
  27. Limit input field to two decimal places – Angular 5
  28. Angular 6 – how to mock router.events url response in unit test
  29. How to create and download text/Json File with dynamic content using angular 2+
  30. Angular4 Load external html page in a div

Leave a Comment