Angular 14点击评论按钮触发RangeError: Invalid array length，评论无法显示

错误原因 #

RangeError: Invalid array length 是因为调用 counter(rating) 创建数组时，rating 不是有效的正整数（比如是NaN、负数、undefined或字符串类型），导致无法创建合法数组。点击评论按钮触发getReviews后，可能接口返回的评论数据中rating值格式异常，或者该方法意外修改了rating的取值。

修复方案 #

1. 加固counter方法，过滤无效输入 #

修改counter方法，确保只生成合法长度的数组：

counter(i: number | string): number[] {
  // 将输入转为数字，取整后判断是否为正整数
  const validLength = Math.floor(Number(i));
  // 仅当长度大于0时返回对应数组，否则返回空数组
  return validLength > 0 ? new Array(validLength) : [];
}

2. 加强模板中的判断逻辑 #

在评分显示的*ngIf中增加更严格的校验，避免无效值进入循环：

<div class="emVaRl" *ngIf="rating && !isNaN(Number(rating)) && Number(rating) > 0 && total_rating">
   <div class="lnfldP">
      <svg width="16" height="16" class="elJCm" viewBox="0 0 24 24"  *ngFor='let in of counter(rating) ;let i = index'>
<path
d="M16.2 8.16l4.74.73a1.23 1.23 0 01.67 2.11l-3.46 3.28a1.23 1.23 0 00-.37 1.1l.77 4.68a1.24 1.24 0 01-1.82 1.29L12.5 19.1a1.28 1.28 0 00-1.16 0l-4.27 2.17A1.25 1.25 0 015.27 20l.85-4.68a1.19 1.19 0 00-.34-1.09l-3.41-3.4a1.23 1.23 0 01.71-2.1l4.75-.64a1.26 1.26 0 00.95-.67l2.16-4.24a1.25 1.25 0 012.24 0l2.09 4.28a1.22 1.22 0 00.93.7z">
</path>
</svg><span class="emVaRl">({{rating}})</span><span class="emVaRl">({{total_rating}})</span>
   </div>
</div>

3. 检查getReviews方法的数据处理逻辑 #

确认getReviews方法在获取评论数据后，是否正确处理了rating字段：

• 如果接口返回的rating是字符串类型，需要先转为数字（比如this.rating = Number(response.rating)）
• 避免在该方法中意外将rating设置为undefined、NaN或负数

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