PrimeNG 表体不显示数据

Question

我在尝试将数据获取到叠加层时遇到问题。我哪里出错了？

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

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

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

  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 文件中的内容。user 接受来自 users 数组的第一个元素的虚拟数据。以下是它收到的内容的预览：

{
      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 }
      ]
 },

目前，控制台内没有显示任何错误，这可以帮助我找出此行为的原因，并且输出不是所需的。

正如您在 imgur 链接中看到的，元素超出了表格（我不明白这种行为）。我尝试从表体中删除双重绑定并打印出随机数据，看看这是否有效（当我这样做时，我还删除了 [value]="day" 和 let-day ），但是没有显示任何内容。最后一件事我尝试过用 div 替换 ng-template （因为本质上这就是它们的本质 - 就我的理解而言），但这也不顺利。

Answer 1

[value]PrimeNg 需要 a才能创建静态表，这是正确的。

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

图我会在这里发布这个，以防其他人在完全放弃 p 表之前遇到类似的问题。