PrimeNG table returning blank rows

Question

Playing around with Angular 8 and the primeNG package, I'm not able to return values. I get rows of empty data, but I am able to retrieve and display the data with the commented out html. Added the entire Typescript file. The staff object is from an interface.

Thanks for your comments. Focusing on the issue though my data does not appear on when I try to retrieve it via {{staff[col.field]}}, however, it appears just fine when I try to retrieve it defining the interface {{staff.Employment.UNIT_ID}} so obviously my interface is fine at least in this instance. Again, thanks for the help.

staff interface;

export interface Staff {
  Employment: Employment;
  Position: Position;
  Fund: Fund;
  Job: Job;
}

export interface Employment {
  EMP_ID?: number
  EMP_NO?: number
  EMP_LAST_NAME?: string
  EMP_FIRST_NAME?: string
  EMP_MIDDLE_INIT?: string
  UNIT_ID?: string
  ORG_ID?: string
  POSITION_NO?: number
  JOB_CODE?: string
  EMP_STATUS?: string
  EMP_SHIFT?: string
  EMP_REG_TEMP?: string
  EMP_FULL_PART?: string
  STD_HOURS?: number
  COMP_FREQ?: string
  COMP_RATE?: number
  COMP_ANNUAL?: number
  SAL_PLAN?: string
  EMP_GRADE?: string
  UNION_CODE?: string
  HIRE_DATE?: Date
  REHIRE_DATE?: Date
  SERVICE_DATE?: Date
}

export interface Position {
  GL_UNIT_ID?: string
  UNIT_ID?: string
  ORG_ID?: string
  POSITION_NO?: number
  JOB_CODE?: string
  POS_STATUS?: string
  REG_TEMP?: string
  FULL_PART?: string
  TYPE?: string
  MAX_HEAD_COUNT?: number
  ACCT_CODE?: string
  FUND_CENTER_NO?: number
  SAL_PLAN?: string
  JOB_GRADE?: string
  CREATION_DATE?: Date
}

export interface Job {
  JOB_CODE?: string
  JOB_TITLE?: string
  SAL_PLAN?: string
  JOB_GRADE?: number
  MIN_ANN_SALARY?: number
  MAX_ANN_SALARY?: number
  JOB_FAMILY?: string
}
export interface Fund {
  FUND?: string
  BUSINESS_UNIT?: string
  LEGAL_FUND?: string
  CAFR_FUND?: string
  FUND_TYPE_NO?: string
  SOURCE_OF_FUNDS?: string
  CONTROL_CODE?: string
  FUNCTION_OF_GOVERNMENT?: string
  LOCATION_REQUIRED?: string
  PROJECT_REQUIRED?: string
  INTEREST_INCOME?: string
  DESCRIPTION?: string
  EFF_DATE?: Date
  END_DATE?: Date
  CURRENT_IND?: number
  OLD_FUND_CENTER_NO?: number
  STATUS?: string
}

HTML Code:

     <p-table [autoLayout]="true" [columns]="cols" [value]="staff" [lazy]="true" [paginator]="true" [rows]="10" 
      [totalRecords]="totalRecords">
      <!-- (onLazyLoad)="lazyLoadStaff($event)" -->
        <ng-template pTemplate="header" let-columns>
          <tr>
            <th *ngFor="let col of columns">
              {{col.headerName}}
            </th>
          </tr>
        </ng-template>
        <ng-template autolayout=true pTemplate="body" let-staff let-columns="columns">
*****This is where I get a list of empty rows
          <tr>
              <td *ngFor="let col of columns">
                {{staff[col.field]}}
              </td>
          </tr>
*****This is where I get a list of empty rows
*****This commented out code returns values.  
          <!-- <tr>
                <td>{{staff.Employment.UNIT_ID}}</td>
                <td>{{staff.Employment.ORG_ID}}</td>
                <td>{{staff.Employment.POSITION_NO}}</td>
                <td>{{staff.Employment.EMP_FIRST_NAME}} {{staff.Employment.EMP_LAST_NAME}}</td>
                <td>{{staff.Position.FUND_CENTER_NO}}</td>
                <td>{{staff.Position.JOB_CODE}}</td>
                <td>{{staff.Employment.COMP_ANNUAL}}</td>
                <td>{{staff.Employment.SERVICE_DATE}}</td>
                <td>{{staff.Employment.COMP_ANNUAL}}</td>
                <td>{{staff.Employment.SERVICE_DATE}}</td>
          </tr> -->
        </ng-template>
      </p-table>

TypeScript code:

    @Component({
  selector: 'app-staff-list',
  templateUrl: './staff-list.component.html',
  styleUrls: ['./staff-list.component.css']
})
export class StaffListComponent implements OnInit {
  title = 'Staffing';
  staff: Staff[];
  gridStaff: Staff;
  cols: any[];
  error: any;
  datasource: Staff[];

  displayedColumns: string[] = ['Unit','Dept','Position','Name','Account','Class','Title','Type','Salary','Service Date'];

  totalRecords: number;

  loading: boolean;

// = [
//   { Unit: 'sdfadsf', Dept: 'adsfasdf', Price: 'adfasfd', Position: 'adf', Employee: 'adsfasdf',
//    Name: 'adsfasdf', Account: 'adsfasdf', Class: 'afasdf', Title: 'adfasdfasd', Type: 'adfasd',
//    Salary: 'adfasdf', Service_Date: 'adfasdf' }
// ];
  constructor(private staffingService: StaffingServiceService) {


  }

rowData: any;

  ngOnInit() {



    this.loading = true;
    this.fillStaffGrid();
    }

  fillStaffGrid(): void {
    // this.staffingService.getStaff().subscribe(data => (console.log(data)));
    this.staffingService.getStaff().subscribe(data =>  { this.staff = data,
      this.cols = [
        {headerName: 'Unit', field: 'Employment.UNIT_ID'},
        {headerName: 'Dept', field: 'Employment.ORG_ID' },
        {headerName: 'Position', field: 'Employment.POSITION_NO' },
        {headerName: 'Name', field: 'Employment.EMP_FIRST_NAME' + " " + 'Employment.EMP_LAST_NAME'},
        {headerName: 'Account', field: 'Position.FUND_CENTER_NO' },
        {headerName: 'Class', field: 'Position.JOB_CODE' },
        {headerName: 'Title', field: 'Job.JOB_TITLE' },
        {headerName: 'Type', field: 'Position.TYPE' },
        {headerName: 'Salary', field: 'Employment.COMP_ANNUAL' },
        {headerName: 'Service Date', field: 'Employment.SERVICE_DATE'}
    ];

    } );


  }

output; enter image description here

Plese can you explain what is staff.Employment.UNIT_ID and others? you have not any Employment in your staff model. — Ashot Aleqsanyan

Ashot Aleqsanyan Ashot Aleqsanyan · Accepted Answer · 2019-12-16T18:45:12

I am not sure but is this what you want? Please check the link.

https://stackblitz.com/edit/primeng-table-tpdvtz

PrimeNG table returning blank rows

1 Answers