如何在 angular 8 中显示选定表格行的微调器

Question

I have a list of videos coming from api. when play icon of a particular video from table is clicked a modal box opens. I want that when we submit this modal box a spinner starts rotating until it get response from server.

my component.html

        <table class="table table-striped tabs">
      <thead>
        <tr>
          <th>S. No.</th>
          <th>Id</th>
          <th>Name</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr
          *ngFor="
            let hero of getCamListPay | paginate: config;
            let x = index
          "
        >
          <td>{{ x + 1 }}</td>
          <td>{{ hero.Id }}</td>
          <td>{{ hero.Name }}</td>
          <td>
            <a>                
              <i (click)="startCameraByForm(hero.Id, temp)"           
             [ngClass]="[loadIcon ? 'fa fa-play' : 'fa fa-spinner fa-spin']"
               aria-hidden="true" >
                </i>
            </a>
          </td>            
        </tr>           
      </tbody>
    </table>  

here is my component.ts file

 startCameraByForm(cameraId: number, temp: TemplateRef<any>) {
 this.modalRef = this.modalService.show(temp);
 this.camIdField = cameraId;

 }

   onSubmit(camInfo): void {
       this.isSubmitted = true;
if (this.camInfoForm.valid) {
  this.hideModalBox();
   this.loadIcon = false;
  this.camServ.dummyService(this.camInfoForm).subscribe((res: any)=>{
    console.log(res);
     this.loadIcon = true;
  })

  }

  }

Answer 1

Try this:

Change loadIcon to be boolean[this.getCamListPay.length] . Then in markup (click)="startCameraByForm(hero.Id, temp, x) and [ngClass]="[loadIcon[x]? 'fa fa-play': 'fa fa-spinner fa-spin']" [ngClass]="[loadIcon[x]? 'fa fa-play': 'fa fa-spinner fa-spin']" . And in code:

startCameraByForm(cameraId: number, temp: TemplateRef<any>, x: number) {
 this.modalRef = this.modalService.show(temp);
 this.camIdField = cameraId;
 this.selectedIndex = x;
}

onSubmit(camInfo): void {
       this.isSubmitted = true;
if (this.camInfoForm.valid) {
  this.hideModalBox();
   this.loadIcon[this.selectedIndex] = false;
  this.camServ.dummyService(this.camInfoForm).subscribe((res: any)=>{
    console.log(res);
     this.loadIcon[this.selectedIndex] = true;
  })

  }

  }