как повернуть спиннер конкретного видео из списка видео из API в angular

Question

Я получаю список видео с иконками воспроизведения и остановки. Я хочу, чтобы конкретное видео воспроизводилось с задержкой в ​​5 секунд. В течение этой задержки вращается вертушка. Но в моем случае, когда я нажимаю значок воспроизведения, запускается вращение всех видео.

- вот мой компонент. 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 data of video ;
            let x = index
          "
        >
          <td>{{ x + 1 }}</td>
          <td>{{ data.Id }}</td>
          <td>{{ data.Name }}</td>
          <td>
            <a>

              <i
                [ngClass]="[
                  loadIcon ? 'fa fa-play pr' : 'fa fa-spinner fa-spin pr'
                ]"
                aria-hidden="true"
                (click)="startCameraByForm(data.Id, temp)"
              >

              </i>


            </a>
            <a
              ><i
                class="fa fa-stop pr"
                (click)="stopCamera(data.Id)"
                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;
     this.disableCameraIdField();
      }

       onSubmit(camInfo): void {
// product= this.profileForm.value;
this.isSubmitted = true;
if (this.camInfoForm.valid) {
  this.hideModalBox();
  this.loadIcon = false;
  this.camServ.dummyService(this.camInfoForm).subscribe((res: any)=>{
    console.log(res);
    console.log("hello");
    this.loadIcon = true;

  })    
  }   
  }

я хочу, чтобы при нажатии кнопки воспроизведения значок конкретного видео-вращателя этого видео начал вращаться.

В моем случае все вращатели запускаются вращение при нажатии определенной иконки воспроизведения, как показано на этом изображении

Answer 1

Вы изменяете значение loadIcon в своем компоненте. К этому свойству обращаются во всех ваших строках. Таким образом, все они будут иметь одно и то же состояние.

Вместо этого вы хотите проверить свойство, ограниченное областью data. Может быть, назначить data.isLoading и проверить это. Но все эти детали зависят от вас и могут зависеть от более широкой системы, в которой вы работаете.

Ниже приведен базовый c пример

компонент. html

<ul>
  <li *ngFor='let details of video' [class.isLoading]='details.isLoading' (click)='loadVideo(details)' >{{details.name}}</li>
</ul>

component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  video = [{
    name: 'Video1',
    isLoading: false
  }, {
    name: 'Video2',
    isLoading: false
  }];

  public loadVideo( details ): void {
    details.isLoading = (details.isLoading)?false:true;
  }
}

компонент. css

li.isLoading{
  background: lightblue;
}

StackBlitz: https://stackblitz.com/edit/angular-zmjgcs