Jak opravit Angular NG0303: Can't bind to 'ngForTrack' since it isn't a known property of ...

Problém

Při otevírání vaší Angular aplikace v browseru vidíte chybovou zprávu jako

ng0303_error_example.txt

my.component.html:14 NG0303: Can't bind to 'ngForTrack' since it isn't a known property of 'div' (used in the '_MyComponent' component template).
1. If 'div' is an Angular component and it has the 'ngForTrack' input, then verify that it is included in the '@Component.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.

my.component.html:14 NG0303: Can't bind to 'ngForTrack' since it isn't a known property of 'div' (used in the '_MyComponent' component template).
1. If 'div' is an Angular component and it has the 'ngForTrack' input, then verify that it is included in the '@Component.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.

Řešení

Nejprve se ujistěte, že přidáte NgFor do vašeho imports array v modulu, kde používáte ngFor="... ; trackBy ...:

import_ngfor.ts

import { NgFor } from '@angular/common';

@Component({
  imports: [
    // ...
    NgFor,
    // ..
  ],
})
// ...

import { NgFor } from '@angular/common';

@Component({
  imports: [
    // ...
    NgFor,
    // ..
  ],
})
// ...

Nicméně, jedním z nejčastějších zdrojů této chyby je erroneous syntax: track by myTrackFunction.

Musí se používat takto:

ngfor_trackby_example.html

<div *ngFor="let item of items; trackBy: myTrackFunction">

<div *ngFor="let item of items; trackBy: myTrackFunction">

takže použijte trackBy: myTrackFunction s trackBy (bez mezery), následovaný colon (:) a poté function name vaší tracking funkce!