Angular Material 5.2.4表格无数据显示问题求助

Hey there! Let's figure out why your table isn't showing rows even though your HTTP request is returning data (and you can see it in the console). Here are the most likely fixes:

1. Link MatPaginator and MatSort to your MatTableDataSource #

This is the most common culprit! You're subscribing to sort and page events, but you haven't actually connected the paginator/sort instances to your data source. Angular Material needs this link to sync the data with the table components properly.

Add this method to your component (use ngAfterViewInit instead of ngOnInit to ensure the view children are fully initialized):

ngAfterViewInit() {
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;
}

You can also remove the line this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 1);—once you link the sort to the data source, this behavior is handled automatically by Angular Material.

2. Double-Check Your Data Structure #

Even though you said the format matches the official example, confirm that each object in data.items has the exact name and description properties your table is expecting. Sometimes API responses have case mismatches (e.g., Name instead of name) or nested fields that break the binding.

Add a quick log to verify the data structure:

.subscribe(data => {
  console.log("First row data:", data[0]); // Inspect the exact properties here
  this.dataSource.data = data;
});

3. Ensure displayedColumns Matches Your Column Definitions #

Your current displayedColumns = ['name', 'description'] matches your matColumnDef values, which is correct—but just double-check you didn't accidentally misspell any column names here or in your template.

Modified Component Code Snippet #

Here's how your updated .ts file might look with the key fixes:

@Component({ 
  selector: 'app-servicepointstablecomponent', 
  templateUrl: './servicepointstable.component.html' 
}) 
export class ServicepointstableComponent implements OnInit, AfterViewInit{ 
  dataSource = new MatTableDataSource(); 
  displayedColumns = ['name', 'description']; 
  @ViewChild(MatPaginator) paginator: MatPaginator; 
  @ViewChild(MatSort) sort: MatSort; 
  @Output() forDisplayRow = new EventEmitter<ServicePoint>(); 
  resultsLength = 0; 
  isLoadingResults = true; 
  isRateLimitReached = false; 
  public selectedRow: ServicePoint; 

  constructor(private tableService: TableService) { } 

  ngOnInit() { 
    merge(this.sort.sortChange, this.paginator.page) 
      .pipe( 
        startWith({}), 
        switchMap(() => { 
          this.isLoadingResults = true; 
          return this.tableService!.getTableDataNew2<ServicePoint>( 
            this.sort.active, 
            this.sort.direction, 
            this.paginator.pageIndex); 
        }), 
        map(data => { 
          this.isLoadingResults = false; 
          this.isRateLimitReached = false; 
          this.resultsLength = data.total_count; // Use actual total count instead of hardcoding
          console.log(data); 
          return data.items; 
        }), 
        catchError(() => { 
          this.isLoadingResults = false; 
          this.isRateLimitReached = true; 
          return observableOf([]); 
        }) 
      ).subscribe(data => {
        console.log("First row data:", data[0]); // Verify data structure
        this.dataSource.data = data;
      }); 
  } 

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) { 
    filterValue = filterValue.trim(); 
    filterValue = filterValue.toLowerCase(); 
    this.dataSource.filter = filterValue; // Don't forget to apply the filter to the data source!
  } 

  onSelect(row: ServicePoint): void { 
    this.tableService.getRowNew<ServicePoint>(row.idServicePoint).subscribe(rr => { 
      this.selectedRow = rr; 
      console.log(rr); 
      this.forDisplayRow.emit(rr);
    });
  } 

  onDelete(row: ServicePoint): void { 
    console.log(`delete row ${row.description} ${row.name}`); 
  }
}

A quick note on the applyFilter method: I added this.dataSource.filter = filterValue; so your filter functionality actually works once the table display is fixed.

Give these changes a try—chances are the missing paginator/sort link was the issue. Let me know if you still run into problems!

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