UI未在IE中更新,使用ngFor显示数组

时间:2018-09-24 10:17:20

标签: angular typescript

我正在使用Angular5。我正在显示将多个文件上传到数组的结果,并使用ngFor在UI上显示结果。

  1. 浏览所选文件以进行上传。对于每个文件,它将调用一个函数 uploadFiles()
  2. 在该函数中,用于保存文件的服务被调用,它将通过调用函数 addFileUploadResult()保存结果。
  3. 在用户界面中,值未显示。

我检查了组件功能,它显示数组中有项目。但是它并没有反映用户界面。

请参考下面的代码。

file-upload-component.ts

public startOperation() {
    for (let i = 0; i < this.uploadFileList.length; i++) {
        this.uploadFiles(this.uploadFileList[i], this.uploadFileList[i].name);
    }
}

uploadFiles(file: File, fileName: FileName) {
    let fileUpload: FormData = new FormData();
    fileUpload.append("file", file);
    this.fileUploadService.uploadFile(fileUpload).subscribe(result => {
        this.addFileUploadResult(fileName + " : " + this.translate.instant(result.message).toString());
    }, error => {
        this.addFileUploadResult(fileName + "Error");
    });
}

addFileUploadResult(message: string) {
    this.uploadResult.push(message);
    if (this.uploadResult.length === this.uploadFileList.length) {
        this.showUploadError = true;
    }
}

file-upload-component.html

<div style="margin: 0px 90px">
    <ul *ngIf="show" style="font-weight: bold">
           <li *ngFor="let message of uploadResult" [ngClass]="message1.includes('Success') ? 'success' : 'failed'">{{message}}</li>
   </ul>
</div>

0 个答案:

没有答案