在Ionic Angular中如何计算数组内所有answer属性值的总和

1. 修正模板单选值类型 #

原有代码中ion-radio的value未加方括号会被解析为字符串，可能导致求和异常，修改为数字绑定即可：

<ion-radio [value]="0"></ion-radio>
<ion-label> Not at all</ion-label>
<!-- 其余三个单选按钮同规则修改，分别绑定[value]="2"、[value]="4"、[value]="5" -->

2. 新增求和与等级匹配逻辑 #

修改ts文件的getQuestionResults方法，同时新增两个类属性存储结果：

// 先在类中新增两个属性存储结果
totalScore?: number;
resultLevel?: string;

getQuestionResults() {
  // 可选校验：判断是否有未答题目
  const hasUnanswered = this.questions.some(item => item.answer === undefined);
  if (hasUnanswered) {
    console.log('请完成所有题目后提交');
    // 可以在此处接入Ionic的Toast组件做用户提示
    return;
  }

  // 数组求和
  this.totalScore = this.questions.reduce((sum, current) => sum + current.answer, 0);

  // 等级匹配，阈值可根据你的实际测评标准调整
  if (this.totalScore <= 10) {
    this.resultLevel = '状态正常';
  } else if (this.totalScore <= 20) {
    this.resultLevel = '轻度异常';
  } else if (this.totalScore <= 28) {
    this.resultLevel = '中度异常';
  } else {
    this.resultLevel = '重度异常';
  }

  // 如果需要跳转结果页传值，可通过路由参数传递
  this.route.navigate(['/result'], {
    queryParams: {
      score: this.totalScore,
      level: this.resultLevel
    }
  });
}

3. 页面结果展示（可选） #

如果需要在当前页面直接展示结果，在模板的提交按钮下方新增展示区域即可：

<div *ngIf="totalScore" margin-vertical text-center>
  <h3>测评总分：{{totalScore}}</h3>
  <h4>结果等级：{{resultLevel}}</h4>
</div>

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