Angular 8将项目添加到数组并更新mat-list中的显示

Question

我有一个文件上传组件，在边上有一个mat-action-list，它显示了所有上传的文件。当用户上传一个文件时，它会按照预期将其添加到列表的底部。然而，如果他们上传了另一个文件，它会将其添加到列表的底部，但之前上传的文件的名称也会更改为刚刚上传的文件。每上传一个额外的文件就会发生这种情况！因此，如果他们上传了5个文件，所有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.

Answer 1

您应该推送file参数，而不是this.applicationFile变量