我有一个文件上传组件,旁边还有一个显示所有上传文件的 mat-action-list。当用户上传一个文件时,它会按预期将其添加到列表底部。但是,如果他们上传另一个文件,它会将其添加到列表底部,但之前上传的文件名也会更改为刚刚上传的文件名。每上传一个额外的文件都会发生这种情况!因此,如果他们上传 5 个文件,所有五个文件都将显示最后上传的文件名。如果您离开屏幕并返回,则列表是正确的。
HTML:
<mat-action-list class="fileList">
<mat-list-item *ngFor="let file of arrApplicationFiles">
<mat-icon mat-list-icon >folder</mat-icon>
<h4 mat-line>{{file.fdFileName}}</h4>
</mat-list-item>
</mat-action-list>
调用添加文件的组件方法:
arrApplicationFiles: ApplicationFile[];
public addNewFile(file: ApplicationFile) {
this.arrApplicationFiles.push(this.applicationFile);
这是获取初始列表的方法:
public getUploadedFiles() {
this.fileService.getFiles()
.subscribe(
res => {
this.arrApplicationFiles = res;
},
error => {
console.log('There was a problem retrieving files !!!' + error);
});
}
``
I expect it to add each added file to the bottom of the list without changing the previously added files.
最佳答案
您应该推送 file
参数,而不是 this.applicationFile
变量
关于Angular 8 将项目添加到数组并更新 mat-list 中的显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58186775/