Angular 函数仅在第一次显示更新值

Question

html

 <input type="file" [(ngModel)]="profile.myFile1" (change)="handleFileInfo($event.target.files, 'myFile1')">    
 <div *ngIf="filesExists('myFile1')">
      <span>Size: {{getFileSize('myFile1')}}</span>                  
 </div>


 <input type="file" [(ngModel)]="profile.myFile2" (change)="handleFileInfo($event.target.files, 'myFile2')">
 <div *ngIf="filesExists('myFile2')">
      <span class="photo-size">Size: {{getFileSize('myFile2')}}</span>                  
 </div>

ts文件代码

    handleFileInfo(files: FileList, fileTypeName: string) { 
       // Other code ....
      let fileObj: FileObj = { type: fileTypeName, file: files.item(0), fileSizeText: fileSizeText, isValid: validSizeFlag };
      this.commonService.addOrReplaceFiles(this.files, fileObj); //Add or update the object array with the file fileObj
    }

    getFileSize(fileTypeName: string) {
      let fileObj = this.files.find(o => o.type === fileTypeName); //this.files : Object array
      return fileObj.fileSizeText;
    }

我有多个文件上传字段。如果我上传文件，它会显示文件大小。如果我再次重新上传文件，它会显示新文件预览。但是 getFileSize() 函数值永远不会更新，它显示第一个上传的文件大小。

Answer 1

getFileSize 仅在第一次呈现 HTML 时被调用。它无法知道您的 myFile1 是否已更改。我建议有一个 myFile1Size 变量，每当你上传一个新文件时，它都会在你的 TS 代码中更新，以保存有关大小的信息并将其绑定到 HTML 中，如 {{myFile1Size}}.

Angular 函数仅在第一次显示更新值

Angular function shows updated value first time only

angular

angular10

html

ts文件代码