角材料表不显示数据

Question

我已经在服务器中部署了我的 Angular 应用程序。经过多次测试，我发现Angular Material表没有显示任何数据，而您在日志中看不到数据。

我只是在生产中遇到这个问题，在开发中一切都很好。

数据将从数据库发送。

Table Image

可以清楚地看到，有数据但没有显示出来。

我的 HTML 文件：

<table mat-table [dataSource]="dataSource">
              <ng-container matColumnDef="CODE">
                <th id ="n" mat-header-cell *matHeaderCellDef>Code</th>
                <td mat-cell *matCellDef="let element">{{element.CODE}}</td>
              </ng-container>
              <ng-container matColumnDef="NAME">
                <th id="typeLien" mat-header-cell *matHeaderCellDef>Nom</th>
                <td mat-cell *matCellDef="let element">{{element.NAME}}</td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>
            </table>

我的 TS 文件：

this.communicationService.getArticles().toPromise().then(allArticles=> {
      this.dataSource = new MatTableDataSource(allArticles);
      this.dataSource.paginator = this.paginator;
    });

Answer 1

这是因为表格在服务响应之前渲染。在渲染之前添加 *ngIf 条件。

<table *ngIf="dataSource" mat-table [dataSource]="dataSource">
              <ng-container matColumnDef="CODE">
                <th id ="n" mat-header-cell *matHeaderCellDef>Code</th>
                <td mat-cell *matCellDef="let element">{{element.CODE}}</td>
              </ng-container>
              <ng-container matColumnDef="NAME">
                <th id="typeLien" mat-header-cell *matHeaderCellDef>Nom</th>
                <td mat-cell *matCellDef="let element">{{element.NAME}}</td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>
            </table>

Answer 2

你必须分配dataSource.data。试试这个：

this.communicationService.getArticles().toPromise().then(allArticles=> {
      this.dataSource = new MatTableDataSource(allArticles);
      this.dataSource.data = allArticles;
      this.dataSource.paginator = this.paginator;
    });

Answer 3

this.communicationService.getArticles().toPromise().then(allArticles => {
    this.dataSource = new MatTableDataSource(allArticles);
    /*enter code here*/
    this.datasource.data = allArticles
    this.dataSource.paginator = this.paginator;
});

请像这样改变你的 Ts 面。