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>

在上面，我有应该创建模板的模板，如图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链接中看到的那样，元素位于表的外部（我不理解这种行为）。我尝试从表主体中删除我的双重绑定并打印出随机数据以查看是否可行（我在执行此操作时也删除了[value] =“ day”和let-day），但是什么也没显示。我试过用divs替换ng-template（因为就我所知，本质上就是它们），但这也不顺利。

Answer 1

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

<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表并使用普通表来解决此问题。显然，as I found here的p表由于[value] =“ user”而需要一个数组。

Answer 3

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

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

图，如果其他人在完全放弃p表之前有类似问题，我将在此处发布。

PrimeNG表主体不显示数据

3 个答案: