I am facing an issue while trying to use trackBy in angular 14 with strict-mode: true,
Here is the code (which works perfectly fine in strict-mode: false)
app.component.html:
<div *ngFor="let item of items; index as i; trackBy: trackByFn">
{{ i + 1 }} {{item.name}}
</div>
<br>
<button (click)="addSomething()">Load Data</button>
app.components.ts
import { Component } from '@angular/core';
interface DemoArray {
id: number;
name: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'angular-sandbox';
public items: DemoArray[] = [
{ id: 0, name: 'Apfel' },
{ id: 1, name: 'Mango' },
{ id: 2, name: 'Birne' },
];
public addSomething(): void {
this.items = [
{ id: 0, name: 'Apfel' },
{ id: 1, name: 'Mango' },
{ id: 2, name: 'Birne' },
{ id: 3, name: 'Kiwi' },
{ id: 4, name: 'Mandarine' },
{ id: 5, name: 'Banane' },
];
}
trackByFn(item) {
return item.id;
}
}
While using strict-mode:true and changing the trackByFn to:
trackByFn(item: { id: any }) {
return item.id;
}
VSCode indicates the following error:
Type '(item: { id: any; }) => any' is not assignable to type 'TrackByFunction'.ngtsc(2322) app.component.ts(8, 44): Error occurs in the template of component AppComponent.