Невозможно получить свойство add для неопределенной или нулевой ссылки при использовании angular-material-fileupload

Question

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {ModalModule} from 'angular-custom-modal';
import {MatMenuModule} from '@angular/material/menu';
import {MatListModule} from '@angular/material/list';
import {MatTableModule} from '@angular/material/table';
import { TableDemoComponent } from './table-demo/table-demo.component';
import {HttpClientModule} from '@angular/common/http';
import { FileUploadModalComponent } from './table-demo/file-upload-modal/file-upload-modal.component';
import {FormsModule} from '@angular/forms';
import { TestModalComponent } from './test-modal/test-modal.component';
import {MatDialogModule} from'@angular/material';
import {MatButtonModule} from '@angular/material/button';
import { MatFileUploadModule } from 'angular-material-fileupload';
import { MyDialogComponent } from './my-dialog/my-dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    TableDemoComponent,
    FileUploadModalComponent,
    TestModalComponent,
    MyDialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatMenuModule,
    MatListModule,
    MatTableModule,
    HttpClientModule,
    ModalModule,
    FormsModule,
    MatDialogModule,
    MatButtonModule,
    MatFileUploadModule
  ],
  entryComponents:[
    MyDialogComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.html

<div [fileUploadInputFor]="fileUploadQueue" class="upload-drop-zone"></div>

// app.component.ts

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

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

  constructor() { }

  ngOnInit() {

  }


  @HostListener('drop', [ '$event' ])
  public onDrop(event: any): any {
    alert("hi");
  }
}

// app.component.css

.upload-drop-zone {
  min-height: 400px;
  min-width: 400px;
  display: table;
  width: 100%;
  background-color: #eee;
  border: dotted 1px #aaa;
}

Ошибка:

ОШИБКА TypeError: Невозможно прочитать свойство 'add' из null в FileUploadInputFor.push ../ node_modules / angular-material-fileupload / matFileUpload.esm.js.FileUploadInputFor.onDrop (matFileUpload.esm.js: 7622)

Файл matFileUpload.esm.js принадлежит исходному коду angular-material-fileupoad

Я реализую этот код по этой ссылке code по этой ссылке Я пытаюсь реализовать второй код функции перетаскивания файлов.

Answer 1

Если код, который вы разместили выше, является действительным кодом, то из ссылки, которую вы указали здесь , кажется, что вы не правильно внедрили код.

Пожалуйста, посмотритепри коде здесь вы увидите, что при вводе вам также понадобится <mat-file-upload-queue>...</mat-file-upload-queue>, как показано ниже:

<div [fileUploadInputFor]="fileUploadQueue" class="upload-drop-zone">
    Just drag and drop files here
</div>

<!-- You forgot below part --> 
<div style="width: 500px">
    <mat-file-upload-queue #fileUploadQueue
        [fileAlias]="'file'"
        [httpUrl]="'http://localhost:8180/jax-rs-jersey-application-sample'" multiple>

        <mat-file-upload [file]="file" [id]="i" *ngFor="let file of fileUploadQueue.files; let i = index"></mat-file-upload>
    </mat-file-upload-queue>
</div>