如何格式化angular物料表中的日期字段

Question

我从我的 web API 得到这些数据

数据是 IOferta 的数组

export interface IOferta {
 id: string
 idPresentada: string;
 descripcion: string;
 fechaPresentacion: Date;
 responsable: string;
 presentada: string;
 plazo: string;
 importe: number;
 organismo: string
}

我有这张表我的组件 html

<section class="container mat-elevation-z8">
 <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of columnsToDisplay" [sticky]="true">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element; let i=index">
      <div *ngIf="column=='fechaPresentacion'">
        {{element[column] | date:'dd/MM/yyyy'}}
      </div>
      <div *ngIf="column=='importe'">
        {{element[column] | currency: 'EUR'}}
      </div>
      <div *ngIf="column!='fechaPresentacion' && column!='importe'">
        {{element[column]}}
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay; sticky:true"></tr>

  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</mat-table>

但我看到这个

我不明白为什么我看不到 fechePresentacion 值

有什么想法吗？

谢谢

Answer 1

您看不到日期，因为它们是“字符串”，而不是“日期对象”。

我建议您使用 map 来转换服务中的日期

getData(){
  return this.httClient.get(....).pipe(
    map((res:any[])=>{
      res.forEach(x=>x.fechaPresentacion=new Date(x.fechaPresentacion))
      return res;
    })
  )
}

当你得到一个独特的项目时同上

getProject(id){
  return this.httClient.get(....).pipe(
    map((res:any)=>{
      res.fechaPresentacion=new Date(res.fechaPresentacion))
      return res;
    })
  )
}

因此，您的组件收到属性“fechaPresentacion”作为日期 object

注意：转换为日期 object 有效，因为字符串的格式为yyyy-MM-ddThh:mm:ss

Answer 2

问题出在这里

this.columnsToDisplay = ['id', 'idPresentada', 'descripcion', 'fechaPresentacion', 'responsable', 'plazo', 'importe', 'organismo'];

我有 'fechapresentacion' 但与

现在我明白了