PrimeNG Table 正文不显示数据

Question

我在尝试将数据提取到我的 overlay.Where 时遇到问题，我是不是做错了？

我的目标是从用户数组中获取数据（如 cId、记录的小时数）并将其显示在我的 table.

中

<button
  [disabled]="false"
  (click)="op1.show($event)"
  pButton
  type="button"
  class="ui-button-primary"
  label="View"
></button>

<p-overlayPanel #op1 [showCloseIcon]="true" [dismissable]="false">
  <p-table [value]="day" [style]="{ width: '400px' }" [rows]="5">
    <ng-template pTemplate="header">
      <tr>
        <td class="headerItem">{{ wbsElement }}</td>
        <td class="headerItem">{{ saturday }}</td>
        <td class="headerItem">{{ sunday }}</td>
        ...
        <td class="headerItem">{{ total }}</td>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-day>
      <tr>
        <td>{{ user.cId }}</td>
        <td *ngFor="let day of user.days">{{ day.hoursLogged }}</td>
        <td>{{ totalHours }}</td>
      </tr>
    </ng-template>
  </p-table>
</p-overlayPanel>

上面我有我的模板，它应该创建我的叠加层，如图所示 here

  wbsElement = Constants.WBS_ELEMENT;
  saturday = Day.SATURDAY;
  sunday = Day.SUNDAY;
  monday = Day.MONDAY;
  ...
  total = Constants.TOTAL;
  user: User;
  totalHours: number = 0;

  constructor(private configService: ConfigService) {}

  ngOnInit() {
    this.configService.getUsers().subscribe(users => {
      this.user = users[0];
    });
    this.getTotalHours();
  }

  private getTotalHours() {
    this.user.days.forEach(day => (this.totalHours += day.hoursLogged));
  }

这是我的 ts 文件中的内容。用户接受来自用户数组第一个元素的虚拟数据。这是它收到的内容的预览：

{
      name: "test",
      cId: "akaskdasda",
      email: "test@test.com",
      platformUser: "akakaksda",
      days: [
        { weekday: Day.MONDAY, hoursLogged: 5 },
        { weekday: Day.TUESDAY, hoursLogged: 8 },
        ...
        { weekday: Day.SUNDAY, hoursLogged: 5 }
      ]
 },

目前，控制台内没有显示错误，可以帮助我找出此行为的原因，输出为 not desired。

正如您在 imgur link 内部看到的那样，元素在 table 之外（我不明白这种行为）。我尝试从 table 正文中删除我的双重绑定并打印出随机数据以查看是否可行（我还删除了 [value]="day" 并在我这样做时放一天），但是shown.Last 我试过用 div 替换 ng-template（因为就我的理解而言，它们基本上就是这样），但这也不是很顺利。

Answer 1

您必须将 user 变量分配给 table 值。试试这个。

<p-overlayPanel #op1 [showCloseIcon]="true" [dismissable]="false">
  <p-table [value]="user" [style]="{ width: '400px' }" [rows]="5">
  <ng-template pTemplate="header">
    <tr>
      <td class="headerItem">{{ wbsElement }}</td>
      <td class="headerItem">{{ saturday }}</td>
      <td class="headerItem">{{ sunday }}</td>
      ...
      <td class="headerItem">{{ total }}</td>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-user>
    <tr>
      <td>{{ user.cId }}</td>
      <td *ngFor="let day of user.days">{{ day.hoursLogged }}</td>
      <td>{{ totalHours }}</td>
    </tr>
  </ng-template>
  </p-table>
</p-overlayPanel>

Answer 2

设法通过放弃 p-table 并使用普通的 table 来解决这个问题。显然，as I found here，p-table 需要一个数组，因为 [value]="user"。

Answer 3

PrimeNg 需要 [value] 才能创建静态 table。

是正确的

但是，您可以传入一个空数组并根据需要静态地执行其他所有操作。因此，如果在 <p-table... 中添加 [value]="[[]]"，则可以在 <tr> 和 <td> 中静态设置所有其他内容。

图我会 post 在这里，以防其他人在完全放弃 p-table 之前遇到类似的问题。

PrimeNG Table 正文不显示数据

PrimeNG Table body doesn't display data

javascript

primeng

angular

primeng-datatable