Root Cause and Solution for 'ngForOf' Binding Error in Angular

Problem Phenomenon and Error Analysis

In Angular version 2.1.0, when attempting to render data lists using the *ngFor directive, the console throws a Can't bind to 'ngForOf' since it isn't a known property of 'tr' error. This error indicates that Angular cannot recognize the ngForOf attribute, typically due to relevant Angular modules not being properly imported.

From a technical perspective, *ngFor is a structural directive in Angular, and its underlying implementation relies on the NgForOf directive. When the Angular compiler encounters the *ngFor syntax, it transforms it into standard property binding form: [ngForOf]="companies". If the module containing the NgForOf directive is not imported, Angular cannot recognize this property binding.

Root Cause Investigation

The fundamental cause of this error lies in improper configuration of Angular's module system. The NgForOf directive is defined in the @angular/common package and needs to be made available in components by importing the appropriate modules.

In Angular applications, there are two main module import strategies:

• BrowserModule: Suitable for the root module (AppModule), it re-exports CommonModule and includes browser-specific services
• CommonModule: Suitable for feature modules, containing common directives like ngFor, ngIf, etc.

The erroneous usage scenario typically manifests as: using the *ngFor directive in a feature module but importing only BrowserModule without CommonModule, or not importing any modules containing these directives at all.

Detailed Solution

Depending on the type of application module, different import strategies should be adopted:

Root Module Configuration

For the application's root module (typically AppModule), BrowserModule should be imported:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
    BrowserModule
  ],
  // Other configurations
})
export class AppModule { }

Feature Module Configuration

For feature modules within the application, CommonModule should be imported:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
    CommonModule
  ],
  // Other configurations
})
export class ProductModule { }

This distinction is crucial because BrowserModule contains services that can only be initialized in the root module. Repeatedly importing BrowserModule in feature modules can cause runtime errors.

Code Examples and Comparison

The following is a complete working example demonstrating correct module configuration and template usage:

// company.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-company',
  templateUrl: './company.component.html'
})
export class CompanyComponent {
  public companies: any[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
  ];
}

// company.component.html
<table>
  <tbody>
    <tr *ngFor="let item of companies; let i = index">
      <td>{{i}}</td>
      <td>{{item.name}}</td>
    </tr>
  </tbody>
</table>

// company.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CompanyComponent } from './company.component';

@NgModule({
  declarations: [CompanyComponent],
  imports: [CommonModule],
  exports: [CompanyComponent]
})
export class CompanyModule { }

Common Misconceptions and Considerations

In actual development, developers often encounter the following common issues:

Directive Name Spelling Errors: Some developers might mistakenly spell it as *ngfor (lowercase f), while the correct spelling is *ngFor (uppercase F). Although modern Angular versions may provide better error messages, this error was difficult to detect in earlier versions.

Module Import Confusion: Incorrectly importing BrowserModule instead of CommonModule in feature modules can lead to unpredictable application behavior.

Syntax Errors: The *ngFor="let categorie as table_categorie" mentioned in the reference article is a typical syntax error. The correct syntax should be *ngFor="let categorie of table_categorie". Using the as keyword instead of of prevents Angular from correctly parsing the template.

Debugging Techniques and Best Practices

When encountering such binding errors, the following debugging strategies can be employed:

1. Check console error messages to identify the specific binding error
2. Verify that relevant modules have correctly imported BrowserModule or CommonModule
3. Ensure directive names are spelled correctly (pay attention to case sensitivity)
4. Check if template syntax complies with Angular specifications
5. Reproduce the issue in a simple environment and gradually eliminate complex factors

Best practice recommendations:

• Establish clear module import standards early in the project
• Use Angular CLI to generate modules and components to reduce configuration errors
• Regularly update Angular versions to obtain better error messages and debugging support
• Implement code review mechanisms within teams to promptly identify configuration issues

Conclusion

The Can't bind to 'ngForOf' error is a common issue in Angular development, with its root cause lying in improper module configuration. By correctly understanding the usage scenarios of BrowserModule and CommonModule, and following Angular's modular design principles, such problems can be effectively avoided and resolved. Proper module imports not only solve current binding errors but also lay a solid foundation for long-term application maintenance and expansion.