Ionic Angular 12 -使用ngFor创建带有百分比的值

ergxz8rk 于 2022-12-16 发布在 Ionic

关注(0)|答案(2)|浏览(155)

你好，我想创建一个评级系统与价值的百分比。我使用离子5与Angular 12。
这就是我要做的。

export class GivePointsComponent implements OnInit {
currentValue = 0;

超文本标记语言

<ul class="tick-marks">
  <li *ngFor="let number of [0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100%]" [class.selected]="number === currentValue">
    {{number}}
  </li>
</ul>

我得到一个明显的错误关于数字与%

ERROR Error: Uncaught (in promise): Error: Errors during JIT compilation of template for GivePointsComponent: Parser Error: Unexpected token , at column 18 in [let number of [0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100%]] in ng:///GivePointsComponent/template.html@35:10 ("
</ion-range>
<ul class="tick-marks">
  <li [ERROR ->]*ngFor="let number of [0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100%]" [class.selected]="numb"): ng:///GivePointsComponent/template.html@35:10, Parser Error: Unexpected token , at column 18 in [let number of [0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100%]] in ng:///GivePointsComponent/template.html@35:10 ("li *ngFor="let number of [0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100%]" [class.selected]="[ERROR ->]number === currentValue">
    {{number}}
  </li>

ionic-framework

来源：https://stackoverflow.com/questions/73485913/angular-12-create-values-with-a-percentage-using-ngfor

2条答案

按热度按时间

yzxexxkh1#

只需要从数组中删除百分号，然后添加它，仅用于显示：

<ul class="tick-marks">
  <li *ngFor="let number of [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]" [class.selected]="number === currentValue">
    {{number}}%
  </li>
</ul>

我还建议您为数字列表设置一个属性：

在TS中

export class Component {
   percentList: number[] = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
   currentValue: number = 0;
}

和模板

<ul class="tick-marks">
  <li *ngFor="let number of percentList" [class.selected]="number === currentValue">
    {{number}}%
  </li>
</ul>

赞(0）回复(0）举报 2022-12-16

7fyelxc52#

您可以将百分比数组定义为字符串（如['0%', '10%', ..., '100%']），也可以将其保留为数字[0, 10, ..., 100]并使用{{ number + '%' }}显示

赞(0）回复(0）举报 2022-12-16

我来回答

Ionic Angular 12 -使用ngFor创建带有百分比的值

2条答案

相关问题

热门标签

最新问答