Angular表格*ngFor渲染行异常：空表格问题排查

Hey there! Let's break down why your table isn't rendering rows from the priceRows array—there are a few common culprits to check:

1. priceRows isn't properly initialized or populated #

First off, make sure your component actually assigns data to priceRows. If it's left as an empty array (or never assigned at all), the table will naturally show no rows.

For example, if you're fetching data asynchronously (like from an API), double-check that you're correctly assigning the response to priceRows:

// In your component.ts
priceRows: any[][] = []; // Initialize as empty 2D array

ngOnInit(): void {
  // Example API call
  this.priceService.getPriceData().subscribe({
    next: (data) => {
      this.priceRows = data; // Ensure data is assigned here!
    },
    error: (err) => console.error('Failed to load data:', err)
  });
}

If you forget this assignment, priceRows stays empty, and no rows render.

2. priceRows has the wrong structure for your template #

Your template expects priceRows to be a 2-dimensional array (an array of arrays), because you're nesting two *ngFor directives:

• Outer loop: *ngFor="let priceRow of priceRows" (iterates over each row array)
• Inner loop: *ngFor="let price of priceRow" (iterates over each value in the row)

If priceRows is a 1-dimensional array (e.g., [10, 20, 30]) or an array of objects (e.g., [{price: 10}, {price: 20}]), the inner *ngFor won't work as expected. For objects, it would iterate over object keys (which might not be visible), and for 1D arrays, it would iterate over individual values but break your table structure.

Verify the structure by adding this to your template to inspect the data:

<!-- Add this somewhere above your table to debug -->
<pre>{{ priceRows | json }}</pre>

3. Change detection isn't triggered (rare but possible) #

If you're assigning priceRows outside of Angular's default change detection context (e.g., using a non-Angular async library, or a setTimeout that runs outside the zone), Angular might not pick up the change.

To fix this, you can manually trigger change detection:

// In your component.ts
import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

// When you assign priceRows:
this.priceRows = newData;
this.cdr.detectChanges(); // Force Angular to update the view

4. Check for template errors in the console #

Sometimes an error in another part of the template (like the columns or subColumns arrays) can break the entire table rendering. Open your browser's developer tools (F12) and check the Console tab for Angular errors. For example, if columns is undefined, the <thead> *ngFor will throw an error, which might prevent the <tbody> from rendering at all.

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