时间戳

首页 > 解决方案 > 角材料表未显示值

angular - 角材料表未显示值

问题描述

我有一些数据需要在表格中显示，但没有显示。当我在其他元素中显示其显示但不在表格中时。

我的代码

    <mat-accordion *ngIf="posts.length > 0">
      <mat-expansion-panel *ngFor="let post of posts">
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{post.name}}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <p>{{ post.type}}</p>
      </mat-expansion-panel>
    </mat-accordion>
    
    
    <table mat-table [dataSource]="posts" class="mat-elevation-z8" *ngIf="posts.length > 0">
    
    
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name. </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
    
      <ng-container matColumnDef="company">
        <th mat-header-cell *matHeaderCellDef> Company </th>
        <td mat-cell *matCellDef="let element"> {{element.company}} </td>
      </ng-container>
    
      <ng-container matColumnDef="type">
    <th mat-header-cell *matHeaderCellDef> Type </th>
    <td mat-cell *matCellDef="let element"> {{element.type}} </td>
  </ng-container>

  <ng-container matColumnDef="quantity">
    <th mat-header-cell *matHeaderCellDef> Quantity </th>
    <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
  </ng-container>

</table>

    <p *ngIf="posts.length == 0" class="info-text mat-body-1">No Reccord added yet</p>

你可以看到我首先有 mat-accordion 然后我有一个 table 记录显示在 mat-accordion 但不在这个 table 我做错了什么？

标签： angulartypescript

解决方案

在上面的示例中，表行信息缺失。

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

displayColumns 应该是要显示的列数组。 https://material.angular.io/components/table/overview

推荐阅读