遇到"类型错误：无法读取未定义的属性(读取"模因")在尝试在 Angular 中使用 ng-upload 上传文件时

Question

我已经为此挣扎了一段时间了。我试图在angular中使用ng-upload上传图像，该文件保存在数据库中，但是当上传队列结束时，我收到"无法读取未定义的属性"。用于接收文件的代码:

Upload.html

<div class="container text-center" *ngIf="memeUploadMode">
<div class="row mt-3">

<div class="col-md-3">

<h3>Dodaj mema</h3>

<div ng2FileDrop
[ngClass]="{'nv-file-over': hasBaseDropzoneOver}"
(fileOver)="fileOverBase($event)"
[uploader]="uploader"
class="card bg-faded p-3 text-center mb-3 my-drop-zone">
<i class="fa fa-upload fa-3x"></i>
Przeciągnij mema tutaj
</div>

<input type="file" ng2FileSelect [uploader]="uploader" />
</div>

<div class="col-md-9" style="margin-bottom: 40px" *ngIf="uploader?.queue?.length">

<h3>Kolejka</h3>
<p>Długość kolejki: {{ uploader?.queue?.length }}</p>

<table class="table">
<thead>
<tr>
<th width="50%">Nazwa</th>
<th>Rozmiar</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>
<div>
Queue progress:
<div class="progress">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s"
(click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
<span class="fa fa-upload"></span> Upload all
</button>
</div>

</div>
</div>

这里是我试图将图像添加到成员对象的代码:

Upload.ts

constructor(public accountService: AccountService, private memberService: MembersService,
private router: Router, private toastr: ToastrService) { 
this.accountService.currentUser$.pipe(take(1)).subscribe(user => this.user = user);
}
ngOnInit(): void {
this.initializeUploader();
}
fileOverBase(e: any) {
this.hasBaseDropzoneOver = e;
} 
deletePhoto(photoId: number) {
this.memberService.deletePhoto(photoId).subscribe(() => {
this.member.photos = this.member.photos.filter(x => x.id !== photoId);
})
}
initializeUploader() {
this.uploader = new FileUploader({
url: this.baseUrl + 'users/add-meme',
authToken: 'Bearer ' + this.user.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 meme: Meme = JSON.parse(response);
this.member.memes.push(meme);
this.user.memeUrl = meme.url;
this.member.memeUrl = meme.url;
this.accountService.setCurrentUser(this.user);
}
}
}
memeToggle() {
this.memeUploadMode = !this.memeUploadMode;
}

错误发生在这一行:

this.member.memes.push(meme);

我已经看过类似的问题，但是没有一个答案对我有帮助。我必须补充一点，我已经有了一个类似的功能，可以添加用户的照片，它的设置完全相同，而且很有效。如有任何帮助，我将不胜感激。

欢呼,菲利普

Answer 1

您应该在组件中定义member

member = {
memes: [],
memeUrl: ''
};

Answer 2

啊，对了。我明白了。我上传了这些照片。

@Input() member: Member;
members: Member[];
memes: Meme[] = [];
model: any = {}
uploader: FileUploader;

按照您的建议定义成员后，编译器要求我也定义所有其他属性。现在它工作了，你是我的救世主，我的好先生:)