Angular 4：如何将API返回状态映射为组件可识别的状态值

嘿，这个状态映射的问题在Angular开发里挺常见的，我给你分享几个实用的解决办法，你可以根据自己的场景选：

这种方式适合只在当前组件需要转换状态的场景，步骤很简单：

首先在你的组件类里定义一个状态映射对象，把API返回的状态值对应到list-view组件需要的success/warning/info：

// 你的组件.ts文件
export class YourTableComponent {
  tableData: any[] = [];
  // 定义状态映射规则
  private statusMap = {
    'Draft': 'info',
    'Not Changed': 'success',
    'Error': 'warning'
  };

  constructor(private apiService: YourApiService) {}

  ngOnInit() {
    this.loadTableData();
  }

  loadTableData() {
    this.apiService.getYourData().subscribe(res => {
      // 遍历API返回的数据，给每个条目添加转换后的状态字段
      this.tableData = res.Data.map(item => ({
        ...item,
        // 用映射表转换，加个默认值避免未匹配的情况
        componentStatus: this.statusMap[item.status] || 'info'
      }));
    });
  }
}

然后在模板里直接使用转换后的字段：

<!-- 表格模板 -->
<table>
  <tr *ngFor="let row of tableData">
    <td>
      <list-view [status]="row.componentStatus"></list-view>
    </td>
    <!-- 其他列渲染 -->
  </tr>
</table>

如果你的状态映射逻辑需要在多个组件里用到，写个自定义管道是更优雅的选择：

首先创建一个管道文件（比如status-mapper.pipe.ts）：

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

@Pipe({
  name: 'statusMapper'
})
export class StatusMapperPipe implements PipeTransform {
  transform(apiStatus: string): string {
    const statusMapping = {
      'Draft': 'info',
      'Not Changed': 'success',
      'Error': 'warning'
    };
    // 未匹配到的状态返回默认值
    return statusMapping[apiStatus] || 'info';
  }
}

别忘了在你的模块里声明这个管道，不然Angular识别不了：

// 比如app.module.ts
import { StatusMapperPipe } from './status-mapper.pipe';

@NgModule({
  declarations: [
    // ...你的组件、指令
    StatusMapperPipe
  ]
})
export class AppModule {}

之后在模板里直接用管道转换状态值就行，不用修改原始数据：

<table>
  <tr *ngFor="let row of response.Data">
    <td>
      <list-view [status]="row.status | statusMapper"></list-view>
    </td>
  </tr>
</table>

如果你的状态类型特别少，也可以直接在模板里用条件判断快速搞定，虽然这种方式扩展性差一点：

<table>
  <tr *ngFor="let row of response.Data">
    <td>
      <list-view 
        [status]="row.status === 'Draft' ? 'info' : 
                 row.status === 'Not Changed' ? 'success' : 
                 row.status === 'Error' ? 'warning' : 'info'">
      </list-view>
    </td>
  </tr>
</table>

个人更推荐前两种方案，方案1简单直接，方案2复用性强，看你的实际需求来选就好～

内容的提问来源于stack exchange，提问作者user8819437