2017-10-18 46 views
0

我有一個JSON對象的接口,其中有日期列。顯示的是自紀元以來的秒數。 我想格式化日期值,但我沒有多少運氣。如何將格式化的日期添加到primeng p-column?

有人能指引我走向正確的方向嗎,或許有一個例子嗎?

<p-dataTable [value]="observations" [rows]="20" [paginator]="true" [responsive]=true selectionMode="single" [(selection)]="selectedObservation" (onRowSelect)="onRowSelect($event)"> 
    <p-header>List of Observations</p-header> 
    <p-column field="id" header="ID" [sortable]="true" [style]="{'width': '100px'}"></p-column> 
    <p-column field="description" header="Description" [sortable]="true"></p-column> 
    <p-column field="citation.id" header="CitationID" [sortable]="true" [style]="{'width': '100px'}"></p-column> 
    <p-column field="citation.citationShortDescription" header="Citation Short Description" [sortable]="true"></p-column> 
    <p-column field="citation.citationDesc" header="Citation Desc" [sortable]="true"></p-column> 
    <p-column field="citation.citationObservations" header="Citation Observations" [sortable]="true"></p-column> 
    <p-column field="citation.dateCorrectionReceived" header="Date Correction Received" [sortable]="true"></p-column> 

    <p-column field="citation.inspectionDate" header="Inspection Date" [sortable]="true">  
      <ng-template let-col let-row="rowData" pTemplate="body"> 
       {{row[col.value]}} 
      </ng-template>    
    </p-column> 

    <p-column field="citation.inspectionDate" header="Inspection Date" [sortable]="true"></p-column> 
    <p-column field="citation.inspectionEndDate" header="Inspection End Date" [sortable]="true"></p-column> 
    <p-column field="citation.cfrCiteLang" header="Cfr Cite Lang" [sortable]="true"></p-column>   
    <p-column field="correctionStatus.status" header="Correction Status" [sortable]="true"></p-column> 
    <p-column field="citation.assignment.userId" header="Assigned To" [sortable]="true"></p-column> 
    <p-column field="citation.assignment.dateAssigned" header="Date Assigned" [sortable]="true"></p-column> 
    <p-column field="citation.assignment.percentInterstate" header="% Interstate" [sortable]="true"></p-column> 
    <p-column field="citation.assignment.inspectionalResponsibilty" header="Inspectional Responsibilty" [sortable]="true"></p-column> 
</p-dataTable> 

    import { Citation } from './citation'; 
import { CorrectiveAction } from './corrective-action'; 
import { Operation } from './operation'; 
import { CorrectionStatus } from './correction-status'; 

export interface Observation { 
    id: number; 
    description: string; 
    creatdBy: string; 
    creatdDt: Date; 
    mdfydBy: string; 
    mdfydDt: Date; 
    citation: Citation; 
    correctiveActions: Set<CorrectiveAction>; 
    operation: Operation; 
    correctionStatus: CorrectionStatus; 
} 
    import { RefCd } from './refcd'; 
import { Assignment } from './assignment'; 
import { Operation } from './operation'; 

export interface Citation { 
    id: number; 
    cfrCiteLang: string; 
    citationDesc: string; 
    issueDate: Date; 
    citationShortDescription: string; 
    citationObservations: string; 
    dateCorrectionReceived: Date; 
    inspectionEndDate: Date; 
    inspectionDate: Date; 
    creatdBy: string; 
    creatdDt: Date; 
    mdfydBy: string; 
    mdfydDt: Date; 
    refcd: RefCd; 
    assignment: Assignment; 
    operation: Operation; 
} 

我也試過這個,但它什麼都沒顯示。

 <p-column field="citation.inspectionDate" header="Inspection Date" [sortable]="true">  
      <ng-template let-row="rowData" pTemplate="body"> 
       {{row.inspectionDate | date}} 
      </ng-template>    
    </p-column> 

回答

0
 <p-column field="citation.inspectionDate" header="Inspection Date" [sortable]="true">  
      <ng-template let-row="rowData" pTemplate="body"> 
       {{row.citation.inspectionDate | date}} 
      </ng-template>    
    </p-column> 

這是解決方案。該行包含子實體,並且需要通過這種方式進行去引用。

0
<p-column field="citation.inspectionDate" header="Inspection Date" [sortable]="true">  
     <ng-template let-row="rowData" pTemplate="body"> 
      {{row.inspectionDate | date:'MM/dd/yyyy'}} 
     </ng-template>    
</p-column> 

你也可以使用DatePipe

{{row.inspectionDate |日期: 'shortDate''}}

欲瞭解更多信息,請訪問該link.