Angular 12+Ionic5中用ngFor实现百分比评分系统报错求助

问题原因 #

你遇到的模板解析错误，是因为Angular模板解析器会将%符号误判为模板语法的一部分，直接在模板里硬编码带%的字符串数组时，就会触发解析异常。

解决方案 #

推荐把百分比数组的生成逻辑移到组件类中，模板只负责渲染数据：

1. 在组件类中生成百分比数组
   在你的.ts文件里通过代码生成包含0%到100%的数组，避免在模板里直接写带特殊符号的字符串：

import { Component } from '@angular/core';

@Component({
  selector: 'app-rating',
  templateUrl: './rating.component.html',
  styleUrls: ['./rating.component.scss'],
})
export class RatingComponent {
  currentValue = 0;
  percentageList: string[] = [];

  constructor() {
    // 生成步长为10%的百分比数组
    for (let i = 0; i <= 100; i += 10) {
      this.percentageList.push(`${i}%`);
    }
  }
}

2. 模板中遍历数组
   在.html文件里直接遍历组件类中定义好的数组即可：

<!-- 示例：用Ionic选择器展示评分选项 -->
<ion-list>
  <ion-item>
    <ion-label>评分百分比</ion-label>
    <ion-select [(ngModel)]="currentValue">
      <ion-select-option 
        *ngFor="let percent of percentageList" 
        [value]="parseInt(percent)"
      >
        {{ percent }}
      </ion-select-option>
    </ion-select>
  </ion-item>
</ion-list>

临时应急方案（不推荐） #

如果一定要在模板里定义数组，确保每个带%的字符串都用单引号包裹，并且整个数组语法正确：

*ngFor="let percent of ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']"

但这种写法在复杂模板里仍可能触发解析问题，优先推荐组件类生成数组的方式。

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