0

I am trying to change the innerHTML of each row in a table according to the current uploading file. I query the rows with QueryList from ViewChildren. Then I tried to change the innerHTML
within the function according to the current upload file. This will contain string interpolation as below, but it will just display the first string passed, but will not iterate the string interpolation. I expect to do it like this.

enter image description here

And when uploading files, it is expecting to change the content with string interpolation, as follows.

enter image description here

But string interpolation is not working here. It will display as plain text. Within the {{progressText}}, it will display the progress percentage of the upload. After finishing the upload it will change as below.

enter image description here

function of the

upload.component.ts

   @ViewChildren('uploadingStatus') uploadList: QueryList<any>;
   ...........

   ngAfterViewInit() {
      console.log(this.uploadList);
   }
   ..............

    updateStatus(fileIndex: number) {
        let fileArray = this.uploadList.toArray();'innerHTML', `${this.progressText}`);
        let element = this.renderer.setProperty(
          fileArray[fileIndex].nativeElement,
          'innerHTML',
          `<span *ngIf="uploading"><i class="fas fa-spinner fa-pulse"></i> 
           {{progressText}}</span>`
        );
        console.log(element);
    }

upload.cpmponent.html

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

My question is? can I apply string interpolation inside the renderer of innterHTML from the function as in the above code? If I am doing wrong here, how to do it?

MD40
  • 157
  • 2
  • 13

0 Answers0