chore: render index

giniedp · Nov 1, 2023 · 8cc9702 · 8cc9702
1 parent 60c3a67
commit 8cc9702
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/apps/web/app/widgets/vitals-detail/vital-damage-table.component.html b/apps/web/app/widgets/vitals-detail/vital-damage-table.component.html
@@ -41,9 +41,9 @@ <h3 class="font-bold">Multiple damage tables found</h3>
       </div>
     </div>
   </div>
-  <div *ngFor="let table of tables" class="flex flex-col gap-2 my-2">
+  <div *ngFor="let table of tables; trackBy: trackByIndex" class="flex flex-col gap-2 my-2">
     <div class="text-center text-primary capitalize font-bold text-2xl">{{ table.name | nwHumanize }}</div>
-    <div *ngFor="let row of table.rows" class="flex flex-col gap-1 px-3 mb-2">
+    <div *ngFor="let row of table.rows; trackBy: trackByIndex" class="flex flex-col gap-1 px-3 mb-2">
       <div class="text-lg leading-tight font-bold">
         <a [routerLink]="['/damage/table', row.DamageID]" class="link-hover">
           {{ row.AttackName }}

diff --git a/apps/web/app/widgets/vitals-detail/vital-damage-table.component.ts b/apps/web/app/widgets/vitals-detail/vital-damage-table.component.ts
@@ -66,7 +66,7 @@ export class VitalDamageTableComponent {
   }
 
   protected iconInfo = svgInfo
-
+  protected trackByIndex = (index: number) => index
   protected tables$ = selectStream(
     combineLatest({
       vital: this.store.vital$,

diff --git a/apps/web/app/widgets/vitals-detail/vital-detail-buffs.component.ts b/apps/web/app/widgets/vitals-detail/vital-detail-buffs.component.ts
@@ -20,7 +20,7 @@ import { AbilityDetailModule } from '../data/ability-detail'
   },
   template: `
     <a
-      *ngFor="let item of effects$ | async"
+      *ngFor="let item of effects$ | async; trackBy: trackByIndex"
       class="flex flex-row gap-2 link-hover text-sky-600"
       [routerLink]="['/status-effects/table', item.id]"
       [tooltip]="tplEffectTip"
@@ -39,7 +39,7 @@ import { AbilityDetailModule } from '../data/ability-detail'
     </a>
 
     <a
-      *ngFor="let item of abilities$ | async"
+      *ngFor="let item of abilities$ | async; trackBy: trackByIndex"
       class="flex flex-row gap-2 link-hover text-sky-600"
       [routerLink]="['/abilities/table', item.id]"
       [tooltip]="tplAbilityTip"
@@ -59,6 +59,7 @@ import { AbilityDetailModule } from '../data/ability-detail'
 })
 export class VitalDetailBuffsComponent {
   private store = inject(VitalDetailStore)
+  protected trackByIndex = (index: number) => index
   protected effects$ = this.store.mutaBuffs$.pipe(
     map((list) => {
       return list?.effects?.map((it) => {