как показать счетчик для выбранной строки таблицы в angular 8

Question

У меня есть список видео с API. при нажатии на значок воспроизведения определенного видео из таблицы открывается модальное окно. Я хочу, чтобы, когда мы отправляем этот модальный блок, спиннер начал вращаться, пока не получит ответ от сервера.

моего компонента. 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>  

вот мой файл component.ts

 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

Попробуйте:

Измените loadIcon на boolean[this.getCamListPay.length]. Затем в разметке (click)="startCameraByForm(hero.Id, temp, x) и [ngClass]="[loadIcon[x] ? 'fa fa-play' : 'fa fa-spinner fa-spin']". И в коде:

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;
  })

  }

  }