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

Question

我有一个文件上传组件，旁边还有一个显示所有已上传文件的 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.

Answer 1

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

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

Angular 8 Adding item to array and update the display in mat-list

angular

typescript

angular-material

angular8

mat-list