Question

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

我在生产中遇到了这个问题，一切都在发展中发挥了作用。

数据将从数据库发送。

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

我的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

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

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

Answer 2

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

请这样改变您的Ts侧。

Answer 3

这是因为表是在服务响应之前呈现的。在呈现之前添加* 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>

角材料表不显示数据

3 个答案: