Angular 5中*NgFor指令失效问题求助，请指出错误所在

架构老林

2026-5-25

Troubleshooting *ngFor Issues in Angular 5

Hey there! Let's break down the most common reasons your *ngFor directive might be acting up. Since I can't see your screenshot, I'll walk through the usual suspects you can cross-check against your code:

Your data isn't initialized or bound correctly
Don't just declare an array without giving it a starting value! If your component has something like items: any[]; instead of items: any[] = [];, Angular might not pick up on when you populate it later. Also double-check that the variable name in your template matches exactly what's in your component (typos happen to the best of us!).
*You messed up the ngFor syntax
Forgetting the * prefix is a classic mistake—ngFor won't work without it! Also, make sure you're using of instead of in (this isn't vanilla JavaScript's for-in loop). The correct structure looks like this:
```
<div *ngFor="let item of items; let i = index">
  {{ i + 1 }}. {{ item.name }}
</div>
```
Your component isn't registered in the module
If this is a new component, did you add it to your @NgModule's declarations array? Angular won't recognize directives in unregistered components, so that's an easy fix if you missed it.
Change detection isn't triggering
If you're loading data asynchronously (like from an API), use the async pipe to handle observable data directly in the template:
```
<div *ngFor="let item of items$ | async">...</div>
```
If you're modifying the array directly (with push() or splice()), Angular might not notice the change. Try reassigning the array instead: this.items = [...this.items, newItem]—this creates a new reference and triggers change detection.
You're stacking structural directives wrong
You can't put *ngIf and *ngFor on the same element. Use <ng-container> to wrap one of them if you need both conditions:
```
<ng-container *ngIf="items.length > 0">
  <div *ngFor="let item of items">
    {{ item.description }}
  </div>
</ng-container>
```