Angular 5中<tr>标签*ngFor指令报错：无法绑定到'ngForFor'

Hey there! Let's get that table row loop working properly. The error you're seeing is caused by a couple of easy-to-fix issues, let's break them down:

1. Correct the *ngFor Syntax (The Immediate Fix) #

Your current code uses for instead of of in the ngFor directive, which is invalid for Angular's syntax. Angular expects the pattern *ngFor="let item of collection" to iterate over lists.

Replace your line with this corrected version:

<tr *ngFor="let data of prescription">

The error Can't bind to 'ngForFor' pops up because Angular misinterprets the for keyword as an attempt to bind to a non-existent property called ngForFor, instead of recognizing it as part of the ngFor directive's syntax.

2. Verify CommonModule is Imported (For Feature Modules) #

If your component lives in a feature module (not the root AppModule), you need to make sure the module imports CommonModule—this is where Angular provides core directives like *ngFor and *ngIf.

In your feature module file (e.g., prescription.module.ts), add the import like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { YourPrescriptionComponent } from './your-prescription.component';

@NgModule({
  declarations: [YourPrescriptionComponent],
  imports: [
    CommonModule // Required to use ngFor in feature modules
  ]
})
export class PrescriptionModule { }

Quick note: The root AppModule typically imports BrowserModule (which includes CommonModule), so this step isn't needed if your component is declared directly in AppModule.

After making these tweaks, restart your Angular dev server and the loop should run smoothly!

内容的提问来源于stack exchange，提问作者rajan khuva