Ionic：在显示HTTP响应数据前如何处理与格式化

看起来你已经成功通过HTTP请求拿到了数组数据，并且能在页面上正常渲染啦！下面我给你分享几种常用的方式，帮你把这些数据处理成想要的格式后再展示：

1. 使用Angular管道（Pipe）处理（推荐方案） #

Angular自带了很多实用的内置管道，比如日期格式化、数字格式化，你也可以自定义管道来处理特定的业务格式需求。

内置管道示例 #

如果你的数据里有日期、数字这类字段，直接在模板里调用内置管道就能快速格式化：

<ion-card *ngFor="let record of aftaleData" >
  <ion-card-content>
    <!-- 把时间戳/日期字符串格式化为丹麦地区的日期样式 -->
    <p>Oprettet dato: {{ record.createdAt | date:'dd-MM-yyyy HH:mm':'da-DK' }}</p>
    <!-- 格式化数字为保留两位小数的格式 -->
    <p>Beløb: {{ record.amount | number:'1.2-2' }} DKK</p>
  </ion-card-content>
</ion-card>

自定义管道（处理复杂逻辑） #

如果内置管道满足不了你的需求，比如要把后端返回的英文状态码转换成丹麦语描述，可以自己写一个管道：

首先用CLI生成管道文件：

ng generate pipe formatStatus

然后在format-status.pipe.ts里编写处理逻辑：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'formatStatus'
})
export class FormatStatusPipe implements PipeTransform {
  transform(value: string): string {
    // 根据后端返回的状态值，返回对应的丹麦语描述
    switch(value) {
      case 'ACTIVE': return 'Aktiv';
      case 'INACTIVE': return 'Inaktiv';
      case 'PENDING': return 'Afventer';
      default: return value;
    }
  }
}

之后在模板里直接使用这个自定义管道：

<p>Status: {{ record.status | formatStatus }}</p>

2. 在组件内预处理数据 #

如果你的处理逻辑比较复杂，或者需要先把整个数据集处理完再渲染，可以在订阅HTTP响应的时候直接处理数据：

修改你的.ts文件：

constructor(public navCtrl: NavController, public navParams: NavParams, public getAftaler: GetaftalerProvider) {
  this.getAftaler.hentAftaler().subscribe(data =>{
    // 遍历数组，处理每条数据的格式
    this.aftaleData = data.map(record => {
      return {
        ...record, // 保留原有的所有字段
        // 添加处理后的新字段
        formattedDate: new Date(record.createdAt).toLocaleDateString('da-DK'),
        fullName: `${record.firstName} ${record.lastName}`
      }
    });
    console.log(this.aftaleData);
  })
}

然后在HTML里直接使用处理好的字段：

<ion-card *ngFor="let record of aftaleData" >
  <ion-card-content>
    <p>Dato: {{ record.formattedDate }}</p>
    <p>Fulde navn: {{ record.fullName }}</p>
  </ion-card-content>
</ion-card>

3. 模板内直接处理（适合简单逻辑） #

如果只是简单的条件判断或字符串拼接，也可以直接在模板里写轻量逻辑：

<ion-card *ngFor="let record of aftaleData" >
  <ion-card-content>
    <!-- 简单条件判断转换状态 -->
    <p>Status: {{ record.status === 'ACTIVE' ? 'Aktiv' : 'Inaktiv' }}</p>
    <!-- 直接拼接字符串 -->
    <p>Adresse: {{ record.street }} {{ record.houseNumber }}, {{ record.city }}</p>
  </ion-card-content>
</ion-card>

内容的提问来源于stack exchange，提问作者Peter Bangsø