Angular 5模板解析错误求助：ngForIn绑定问题未解决

Hey there, let's work through this issue you're stuck on. First off, let's get a key point straight: Angular (whether 4 or 5) doesn't have a built-in ngForIn directive—that's likely where the confusion is coming from. Here's how to resolve this step by step:

• Use the correct *ngFor syntax for arrays/iterables
  Angular's standard *ngFor uses the of keyword, not in, to loop through arrays or iterable objects. For example:

  <div *ngFor="let item of myArray">
    {{ item }}
  </div>
  

• If you need to loop through an object's keys/values
  If you were trying to iterate over an object's properties (like you would with JavaScript's for...in), you'll need to convert the object into an array first. Here's how to do it:

  1. In your component, add a reference to Object.keys (or Object.entries for key-value pairs):

     import { Component } from '@angular/core';
     
     @Component({
       selector: 'app-my-component',
       templateUrl: './my-component.component.html'
     })
     export class MyComponent {
       objectKeys = Object.keys; // Expose Object.keys to the template
       myObject = { name: 'John', age: 30, job: 'Developer' };
     }
     

  2. Then in your template, loop through the keys:

     <div *ngFor="let key of objectKeys(myObject)">
       {{ key }}: {{ myObject[key] }}
     </div>
     

• Double-check CommonModule imports
  You mentioned importing CommonModule in app.module.ts, but if the component using *ngFor is part of a child module, you need to import CommonModule in that child module too. Angular modules don't automatically inherit imports from parent modules, so this is a common gotcha.

• Avoid relying on NO_ERRORS_SCHEMA or CUSTOM_ELEMENTS_SCHEMA
  While these schemas can suppress "unknown property" errors, they don't fix the underlying issue—they just hide the warning. Since ngForIn isn't a valid Angular directive, using these schemas won't make your loop work, so it's better to fix the root problem instead.

• Why downgrading to Angular 4 didn't help
  This issue has nothing to do with Angular version differences—neither Angular 4 nor 5 includes an ngForIn directive. Downgrading wasn't going to resolve this specific error.

Hopefully these steps get your loops working properly!

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