为什么在定义的数组上收到“ ERROR TypeError：无法读取未定义的属性'length'的信息”？

Question

I defined, initialized(TWICE) my array, yet i am getting "ERROR TypeError: Cannot read property 'length' of undefined" at runtime.

I already tried to check if the array was defined as you can see in my code, still angular is just trolling me. I already tried all solutions like changing the sintax to "filesToUpload && filesToUpload?.length > 0" or any possible combination, however Angular is just not working properly imo.

component.html file

<ng-container *ngIf="undefined !== filesToUpload && filesToUpload.length > 0">
  <button (click)='uploadImages()' 
           class="btn btn-success" 
           type="button">
          <i class="fas fa-upload"></i>Upload
  </button>

  <button (click)='cancelUpdate()' 
          class="btn btn-danger" 
          type="button">Cancel</button>
</ng-container>

This is my component.ts file

export class ImageGalleryUploadComponent implements OnInit 
{
  filesToUpload: File[] = [];
  ngOnInit() {
    this.filesToUpload = []
  }
}

is this an angular bug? or has something to do with component lifecycle?

Answer 1

Try this, somewhere you are assigning undefined to your Array object.

<ng-container *ngIf="filesToUpload && filesToUpload != 'undefined' && filesToUpload.length > 0">

Though it's not a good practice, just try it once and if confirmed then cross-check in your code.

Answer 2

使用安全的导航运算符尝试这种方式，它将一次性处理null和lentgh文件，

<ng-container *ngIf="filesToUpload && filesToUpload?.length > 0">

Answer 3

Just do it once like:

export class ImageGalleryUploadComponent implements OnInit 
{
  filesToUpload: File[] = [];
}

I have faced this issue as well. Removing the re-initialisation from ngOnInit should fix the issue. And don't worry every time the component is initialised it will be set to [] .