如何从来自api的视频列表中旋转特定视频的旋转器

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>

这是我的组件.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并检查一下。但这些细节都取决于你，可能取决于你工作的更广泛的系统

以下是的基本示例

component.html

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

组件.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;
}
}

component.css

li.isLoading{
background: lightblue;
}

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