Тело таблицы PrimeNG не отображает данные - PullRequest
Новая
       13

Тело таблицы PrimeNG не отображает данные

1 голос
/ 08 апреля 2019

У меня возникают проблемы при попытке извлечь данные в оверлей. Где я ошибся?

Моя цель - извлечь из пользовательского массива данные (например, 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 файл.Пользователь принимает фиктивные данные из первого элемента массива пользователей.Вот предварительный просмотр того, что он получает: 

{
      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, когда я это сделал), однако ничего не было показано. ПоследнееЯ пытался заменить ng-template на div (потому что по сути это то, чем они являются - насколько я понимаю), но это тоже не сработало.

Ответы [ 2 ]

1 голос
/ 09 апреля 2019

Удалось решить эту проблему, отказавшись от p-таблицы и использовав вместо нее обычную таблицу.Очевидно, что , как я нашел здесь , p-таблица ожидает массив из-за [value] = "user".

1 голос
/ 09 апреля 2019

Вы должны присвоить 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>
...