Wie man Angular NG0303 behebt: Can't bind to 'ngForTrack' since it isn't a known property of ...

Problem

Beim Öffnen Ihrer Angular-Anwendung im Browser sehen Sie eine Fehlermeldung wie

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.

Lösung

Stellen Sie zuerst sicher, dass Sie NgFor zu Ihrem imports-Array im Modul hinzufügen, in dem Sie ngFor="... ; trackBy ... verwenden:

import_ngfor.ts
import { NgFor } from '@angular/common';

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

Eine der häufigsten Ursachen für diesen Fehler ist jedoch eine fehlerhafte Syntax: track by myTrackFunction.

Es muss so verwendet werden:

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

verwenden Sie also trackBy: myTrackFunction mit trackBy (ohne Leerzeichen), gefolgt von einem Doppelpunkt (:) und dann dem Funktionsnamen Ihrer Tracking-Funktion!


Check out similar posts by category: Angular, Typescript