Angular MatTable未呈现MatTableDataSource数据

我正在创建一个保存服务器端分页数据的表。但是，当我尝试在MatTable中渲染它时，我的数据根本不显示。我记录了数据源，它通常显示数据。代码如下：

数据表.component.html

<div class="card-body mt-3">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!-- Number Column -->
    <ng-container matColumnDef="tn">
      <th mat-header-cell *matHeaderCellDef> TICKET# </th>
      <td mat-cell *matCellDef="let element"> {{element.tn}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef> TITLE </th>
      <td mat-cell *matCellDef="let element"> {{element.title}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef> DATE </th>
      <td mat-cell *matCellDef="let element"> {{element.create_time}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="product">
      <th mat-header-cell *matHeaderCellDef> PRODUCT </th>
      <td mat-cell *matCellDef="let element"> {{element.product}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="daysFromRegistration">
      <th mat-header-cell *matHeaderCellDef> DAYS SINCE REGISTERED </th>
      <td mat-cell *matCellDef="let element"> {{element.daysFromRegistration}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="analysisDays">
      <th mat-header-cell *matHeaderCellDef> DAYS ANALYSED </th>
      <td mat-cell *matCellDef="let element"> {{element.analysisDays}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="developmentDays">
      <th mat-header-cell *matHeaderCellDef> DAYS IN DEVELOPMENT </th>
      <td mat-cell *matCellDef="let element"> {{element.developmentDays}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="waitOrResponseDays">
      <th mat-header-cell *matHeaderCellDef> DAYS IN WAITING STATE </th>
      <td mat-cell *matCellDef="let element"> {{element.waitOrResponseDays}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="slaDays">
      <th mat-header-cell *matHeaderCellDef> SLA# </th>
      <td mat-cell *matCellDef="let element"> {{element.slaDays}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="user">
      <th mat-header-cell *matHeaderCellDef> AGENT USERNAME </th>
      <td mat-cell *matCellDef="let element"> {{element.user}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

控制台日志（票据）

试试这个

 ngOnInit() {
      this.ticketService.findTickets(0, 25).subscribe(
        (tickets: Ticket[]) => {
          this.dataSource = new MatTableDataSource(tickets);
          this.SetTableProperties();
        }
      )
  }
SetTableProperties() {
    this.dataSource.paginator = this.paginator;
  }

---

不起作用。我认为这不是一个问题，在paginator组件，因为我已经尝试了没有它你能提供角材料版本？它甚至没有呈现标题？如果您使用console.log（tickets），您还可以发布控制台显示的内容吗？我还没有实现标题。我已经在底部添加了票证的console.log，您有console.log数据源。尝试控制台日志记录。

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Ticket } from '../model/ticket';

@Injectable({
  providedIn: 'root'
})
export class TicketService {

  private ticketUrl: string;

  constructor(private http: HttpClient) {
    this.ticketUrl = 'http://localhost:8080/tickets';
   }

  public findTickets(pageNumber=0, pageSize=10): Observable<Ticket[]> {

    return this.http.get<Ticket[]>(this.ticketUrl, {
      params: new HttpParams()
      .set('page', pageNumber.toString())
      .set('size', pageSize.toString())
    })
  }
}

MatTableDataSource {_renderData: BehaviorSubject, _filter: BehaviorSubject, _internalPageChanges: Subject, _renderChangesSubscription: Subscriber, sortingDataAccessor: ƒ, …}
filterPredicate: (data, filter) => {…}
filteredData: {content: Array(24), pageable: {…}, totalElements: 32876, last: false, totalPages: 1316, …}
sortData: (data, sort) => {…}
sortingDataAccessor: (data, sortHeaderId) => {…}
_data: BehaviorSubject {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
_filter: BehaviorSubject {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
_internalPageChanges: Subject {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
_renderChangesSubscription: Subscriber {closed: false, _parentOrParents: null, _subscriptions: Array(1), syncErrorValue: null, syncErrorThrown: false, …}
_renderData: BehaviorSubject {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
data: (...)
filter: (...)
paginator: (...)
sort: (...)
__proto__: DataSource

{content: Array(10), pageable: {…}, last: false, totalElements: 32878, totalPages: 3288, …}
content: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
empty: false
first: true
last: false
number: 0
numberOfElements: 10
pageable: {sort: {…}, offset: 0, pageNumber: 0, pageSize: 10, unpaged: false, …}
size: 10
sort: {sorted: false, unsorted: true, empty: true}
totalElements: 32878
totalPages: 3288
__proto__: Object

 ngOnInit() {
      this.ticketService.findTickets(0, 25).subscribe(
        (tickets: Ticket[]) => {
          this.dataSource = new MatTableDataSource(tickets);
          this.SetTableProperties();
        }
      )
  }
SetTableProperties() {
    this.dataSource.paginator = this.paginator;
  }