Angular 5中*ngFor指令无法遍历显示数组数据求助

Hey there! Since you’ve got *ngFor working smoothly in other projects, this is almost certainly a tiny, easy-to-miss detail causing the hiccup. Let’s walk through the most common culprits:

1. Your array isn’t properly initialized or populated #

*ngFor can’t iterate over undefined or null—if you declared your array but didn’t initialize it to an empty array, or if your data loads asynchronously and you’re not handling that correctly, it’ll fail silently (or throw a clear console error).

Example of a common mistake:

// ❌ Bad: Array starts as undefined
export class AppComponent {
  productList; // No initial value set
  ngOnInit() {
    this.productService.getProducts().subscribe(products => {
      this.productList = products;
    });
  }
}

Fix it by initializing the array to an empty array first:

// ✅ Good: Array starts empty, then gets populated
export class AppComponent {
  productList: any[] = [];
  ngOnInit() {
    this.productService.getProducts().subscribe(products => {
      this.productList = products;
    });
  }
}

2. Template syntax typos #

Double-check your *ngFor line in app.component.html—small mistakes break things fast:

• Did you forget the asterisk? (ngFor instead of *ngFor)
• Did you misspell the array variable name? (e.g., using productLists instead of productList)
• Is the "let" syntax formatted correctly?

Example of a broken template:

<!-- ❌ Missing asterisk + wrong variable name -->
<div ngFor="let product of productLists">{{ product.name }}</div>

Fixed version:

<!-- ✅ Correct syntax -->
<div *ngFor="let product of productList">{{ product.name }}</div>

3. Incomplete component class #

Your code snippet cuts off at ex...—make sure you’re actually exporting your component class! If you forgot the export keyword, your template won’t be able to access the array variable at all.

Missing export (broken):

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
// ❌ No export statement here
class AppComponent {
  productList = [/* your data */];
}

Fixed with export:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
// ✅ Export the class so the template can use it
export class AppComponent {
  productList = [/* your data */];
}

4. Check the browser console for direct clues #

Open your browser’s DevTools (F12) and head to the Console tab—Angular will almost always log an error here that points directly to the problem. For example, if your array is null, you’ll see something like:

ERROR Error: Cannot find a differ supporting object 'null' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

If you see that, add an *ngIf to guard against empty/null values:

<!-- Guard against null/undefined before rendering -->
<div *ngIf="productList">
  <div *ngFor="let product of productList">{{ product.name }}</div>
</div>

Since this works in other projects, my bet is it’s one of these small oversights. If you can share the full component code and template, we can pin it down even faster!

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