Angular 6 ng2-file upload не может прочитать свойство очереди как неопределенное

Question

Использование Angular 6 для загрузки изображений на сервер с помощью загрузчика файлов ng2 от Valor Software и постоянного получения ошибок.Дело в том, что раньше я использовал загрузчик файлов ng2 с кодом Visual Studio, и он работал нормально.Этот проект был начат с Visual Studio 2017 с пакетом .NET Core & Angular, и мне интересно, связано ли это с тем, почему это не работает так же (или почти так же легко).

IЯ использую "ng2-file-upload": "^1.3.0" в package.json.

Я импортировал и объявил import { FileUploadModule } from 'ng2-file-upload'; в моем массиве импорта моего модуля.

my html:

<div class="row">
  <div class="col-12">
    <h3>Upload queue</h3>
    <p>Queue length: {{ uploader?.queue?.length }}</p>
    <table class="table">
      <thead>
        <tr>
          <th width="50%">Name</th>
          <th>Size</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of uploader.queue">
          <td><strong>{{ item?.file?.name }}</strong></td>
          <td *ngIf="uploader.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
        </tr>
      </tbody>
    </table>
    <div class="progress mb-4">
      <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
    </div>
  </div>
  <div class="col-12">
    <div ng2FileDrop
         [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
         (fileOver)="fileOverBase($event)"
         [uploader]="uploader"
         class="well my-drop-zone">
      Base drop zone
    </div>
  </div>
</div>

Мой component.ts:

export class PhotoEditorComponent implements OnInit {
  @Input() photos: Photo[];
  baseUrl = environment.levanaBaseUrl;
  uploader: FileUploader;
  hasBaseDropZoneOver = false;

  constructor(private auth: AuthService,
    private userService: UserService) { }

  ngOnInit() {
  }

  fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }

  initializeUploader() {
    this.uploader = new FileUploader({
      url: this.baseUrl + 'users/' + this.auth.currentUser.id + '/photos',
      authToken: 'Bearer ' + localStorage.getItem('token'),
      isHTML5: true,
      allowedFileType: ['image'],
      removeAfterUpload: true,
      autoUpload: false,
      maxFileSize: 10 * 1024 * 1024
    });

    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };

    this.uploader.onSuccessItem = (item, response, status, headers) => {
      if (response) {
        const res: Photo = JSON.parse(response);
        const photo = {
          id: res.id,
          url: res.url,
          dateAdded: res.dateAdded,
          description: res.description,
          isMain: res.isMain
        };
        this.photos.push(photo);
        if (photo.isMain) {
          localStorage.setItem('user', JSON.stringify(this.auth.currentUser));
        }
      }
    };
  }

}

И я постоянно получаю эти ошибки, когда HTML-рендеринг все портит.

Answer 1

Добавьте следующие строки импорта в файл .module.ts

import { FileUploadModule } from 'ng2-file-upload';
import { CommonModule } from '@angular/common';

@NgModule({
....
  imports: [FileUploadModule,CommonModule],
....  
})

Answer 2

У вас есть функция с именем initializeUploader, которую вы никогда нигде не вызываете.Я подозреваю, что звонок от ngOnInit решит вашу проблему.