使用 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;
}

错误是：

错误类型错误：无法读取 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

如果你上面贴的代码是实际的代码，那么从你给here的参考链接看，你似乎没有正确实现代码。

请查看代码here，您会看到输入时还需要<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>