Angular 11：如何在Mat-Table中将API返回的0/1状态值替换为对应文本显示

针对你在Angular 11项目里的需求——把Mat-Table中row.remarks的0/1值分别显示为"fail"/"passed"，这里有几个实用的实现方式，完美适配你的现有代码：

方法1：模板内直接使用三元运算符（最快最直接） #

这是零额外代码的快速实现方式，直接在HTML模板里完成值的转换：

修改你的remarks列的<td>内容即可：

<ng-container matColumnDef="remarks">
  <th class="font" mat-header-cell *matHeaderCellDef >Quiz Score</th>
  <!-- 用三元运算符判断数字值，返回对应文本 -->
  <td class="font" mat-cell *matCellDef="let row" >{{ row.remarks === 1 ? 'passed' : 'fail' }}</td>
</ng-container>

优点：无需修改TS代码，5秒就能搞定；适合只在这一个表格列使用的场景。
缺点：如果后续多个组件/表格需要同样的转换，会出现代码重复。

方法2：自定义Angular管道（优雅复用） #

如果以后你需要在多个地方做同样的状态转换，推荐用自定义管道，保持代码的可维护性：

步骤1：创建状态转换管道 #

在项目中生成一个新的管道文件（比如quiz-status.pipe.ts）：

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

@Pipe({
  name: 'quizStatus'
})
export class QuizStatusPipe implements PipeTransform {
  transform(value: number): string {
    // 根据输入的数字返回对应文本
    return value === 1 ? 'passed' : 'fail';
  }
}

步骤2：在模块中声明管道 #

确保在你的组件所属的模块（比如AppModule或功能模块）里注册这个管道：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入你的自定义管道
import { QuizStatusPipe } from './quiz-status.pipe';
// 其他必要的组件/模块导入...

@NgModule({
  declarations: [
    // ...你的其他组件
    QuizStatusPipe // 声明管道
  ],
  imports: [BrowserModule, MatTableModule /* 其他Angular Material模块 */],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：在Mat-Table模板中使用管道 #

修改HTML代码，通过管道转换状态值：

<ng-container matColumnDef="remarks">
  <th class="font" mat-header-cell *matHeaderCellDef >Quiz Score</th>
  <!-- 使用自定义管道处理状态显示 -->
  <td class="font" mat-cell *matCellDef="let row" >{{ row.remarks | quizStatus }}</td>
</ng-container>

优点：代码复用性极强，以后要修改文本（比如改成"未通过"/"通过"）只需要改管道里的一行代码；完全符合Angular的最佳实践。
缺点：需要额外创建管道文件，适合多场景复用的情况。

方法3：在TS中预处理数据（适合数据固定的场景） #

如果你希望在数据进入数据源之前就把状态转成文本，可以在获取API数据后直接处理：

修改你的getUserScoreByQuizID方法，在赋值给postsUser前转换每个项的状态：

getUserScoreByQuizID(quizID: number){
  this.dataService.getUserScoreByQuizID(quizID).subscribe(res=>{
    // 预处理数据，将数字remarks转为对应文本
    this.postsUser = res.UserScore.map(item => ({
      ...item,
      // 可以直接覆盖原remarks字段，或者新增一个status字段
      remarks: item.remarks === 1 ? 'passed' : 'fail'
      // 新增字段写法：status: item.remarks === 1 ? 'passed' : 'fail'
    }));
    console.log(this.postsUser)
    this.dataSource = new MatTableDataSource(this.postsUser);
    console.log(res);
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  })
}

然后模板里直接显示处理后的字段：

<td class="font" mat-cell *matCellDef="let row" >{{row.remarks}}</td>
<!-- 如果是新增的status字段，就用{{row.status}} -->

优点：数据一次处理完成，模板不需要额外逻辑；适合数据不会动态变化的场景。
缺点：如果后续需要用remarks的原始数字做过滤、排序等逻辑，这种方式会覆盖原数值，需要额外保留原字段。

根据你的实际业务场景选择最合适的方式就好！

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