Angular NZ Upload: 解决文件列表删除图标不显示的问题

<nz-upload nzType='drag' [nzAction]='uploadUrl' [(nzFileList)]='fileList' (nzChange)='handleChange($event)' [nzAccept]='acceptFileType' [nzMultiple]='false' [nzBeforeUpload]='beforeUpload' [nzSize]='fileSize' [nzLimit]='fileCount' [(ngModel)]='name'> <ng-template #customTemplate>

将文件拖到此处，或

点击上传

<ng-template #itemTemplate let-file>

<ng-template #listTemplate>

<ng-container *ngIf='file.status === 'uploading''> <span class='ant-upload-list-item-name' [title]='file.name'>{{file.name}}


然后在组件中添加相应的处理方法：

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent {
  fileList = [];
  uploadUrl = 'your-upload-url';
  acceptFileType = '.txt';
  fileSize = 1024; // file size limit in KB
  fileCount = 1; // file count limit
  name = '';

  handleChange(event) {
    this.fileList = [...event.fileList];
  }

  handleRemove(file) {
    const index = this.fileList.indexOf(file);
    if (index !== -1) {
      this.fileList.splice(index, 1);
    }
  }

  beforeUpload = (file: NzUploadFile): boolean => {
    // custom before upload logic
    return true;
  }
}

确保在组件中导入了 NzUploadModule 和 NzIconModule。

这样就可以在文件列表中显示删除图标了。