Angular组件间传值后如何仅显示数字结果？

看起来你现在的模板因为使用了| json管道和多层keyvalue遍历，导致渲染出了完整的对象结构而不是单纯的数字。我们可以通过调整模板遍历方式和去掉不必要的管道来解决这个问题，下面分步骤说明：

1. 问题根源分析 #

你当前在模板里嵌套了两层*ngFor="... | keyvalue"，再加上| json管道，这会把每个值的完整结构（比如对象）转成JSON字符串输出。要只显示数字，我们需要直接访问到数字类型的属性值，去掉| json管道即可。

2. 根据数据结构修改模板 #

情况A：如果que是纯数字数组（比如[3, 5, 7]） #

直接遍历数组元素，不需要keyvalue管道：

<div *ngIf="operation === 1">
  <div class="app flex-row align-items-center">
    <div class="container">
      <div class="card-block">
        <!-- 遍历每个问题，显示序号和数字 -->
        <div *ngFor="let num of que; let i = index">
          <h4 class="card-title text-center">{{ i + 1 }}.) &nbsp;&nbsp;{{ num }}</h4>
        </div>
      </div>
      <!-- 格式化显示答案数组 -->
      <h4 class="card-title text-center">
        Answers: &nbsp;&nbsp;&nbsp; 
        <span *ngFor="let ans of answer; let last = last">
          {{ ans }}{{ last ? '' : ', ' }}
        </span>
      </h4>
    </div>
  </div>
</div>

情况B：如果que是含数字属性的对象数组（比如[{num1: 2, num2: 4}, {num1: 6, num2: 8}]） #

需要遍历每个对象，再遍历它的属性值：

<div *ngIf="operation === 1">
  <div class="app flex-row align-items-center">
    <div class="container">
      <div class="card-block">
        <div *ngFor="let question of que; let i = index">
          <h4 class="card-title text-center">{{ i + 1 }}.) &nbsp;&nbsp;</h4>
          <!-- 遍历对象的每个数字属性，横向排列 -->
          <div class="d-inline-block mx-2" *ngFor="let item of question | keyvalue">
            {{ item.value }}
          </div>
        </div>
      </div>
      <!-- 格式化显示答案数组 -->
      <h4 class="card-title text-center">
        Answers: &nbsp;&nbsp;&nbsp; 
        <span *ngFor="let ans of answer; let last = last">
          {{ ans }}{{ last ? '' : ', ' }}
        </span>
      </h4>
    </div>
  </div>
</div>

3. 增强类型安全性（可选） #

为了避免解析后的数据类型不确定，你可以在Component2.ts里定义接口并做类型断言，同时增加空值判断防止出错：

// 根据实际数据结构定义接口
interface Question {
  [key: string]: number; // 动态属性用索引签名
}

@Component({/* ... */})
export class Component2 {
  answer: number[] = [];
  que: Question[] = [];
  level = 1;
  operation = 1;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      // 加空值判断，避免JSON.parse报错
      this.que = JSON.parse(params.get("questions") || '[]') as Question[];
      this.answer = JSON.parse(params.get("answers") || '[]') as number[];
      this.level = parseInt(params.get("level") || '1');
      this.operation = parseInt(params.get("operation") || '1');
    });
  }
}

关键总结 #

• 去掉| json管道，直接渲染属性值就能显示数字
• 根据实际数据结构调整*ngFor的遍历层级，确保拿到数字类型的值
• 对路由参数做空值判断，避免解析时出现运行时错误

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