Question

在使用Angular 8和primeNG包时，我无法返回值。我得到了空数据行，但是我可以使用注释掉的html检索和显示数据。添加了整个Typescript文件。人员对象来自界面。

感谢您的评论。尽管我尝试通过{{staff [col.field]}}检索数据时没有出现我的数据，但着眼于该问题，但是，当我尝试定义接口{{staff.Employment]检索数据时，它似乎很好。 UNIT_ID}}，显然，至少在这种情况下，我的界面还不错。再次感谢您的帮助。

工作人员界面；

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代码：

     <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代码：

    @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'}
    ];

    } );


  }

输出； enter image description here

Answer 1

我不确定，但这是您想要的吗？请检查链接。

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

PrimeNG表返回空白行

1 个答案: