如何在 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']" [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;
  })

  }

  }