[英]how to show spinner for selected table row in angular 8
我有一份來自 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;
})
}
}
嘗試這個:
將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;
})
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.