ngClass 不刷新 css 类答案

【问题标题】：ngClass doesn't refresh css classngClass 不刷新 css 类
【发布时间】：2023-03-17 22:23:01
【问题描述】：

我和 Angular 4 打得很厉害。我不想制作简单的星级组件。我的模板如下所示：

<div class="card rating">
<div class="card-section">
    <p class="ratings-card-header">{{name}}</p>
    <div class="grid-x grid-margin-x">
        <div class="rating-block cell small-12 medium-6 large-3"
             *ngFor="let ratingItem of values; let ratingItemIndex = index">
            <p class="ratings-type">{{ ratingItem.label }}</p>
            <div class="rating-block-rating">
                <a *ngFor="let a of getFakeArrayIteration(); let index = index" [ngClass]="time"
                   (click)="changeValue(ratingItem, index + 1)" >
                    <i [ngClass]="isStarSelected(index, ratingItem)">
                    </i>
                </a>
            </div>
        </div>
    </div>
</div>

我的控制器类如下所示：

import {Component, Input, OnInit} from '@angular/core';

import 'foundation-sites';
import {LabelledValue} from './star-rating-vaules';


@Component({
  selector: 'star-rating',
  templateUrl: './star-rating.component.html',
  styleUrls: ['./star-rating.component.scss']
})
export class StarRatingComponent implements OnInit {
@Input() public name: string;
@Input() public maxValue: number;
@Input() public values: LabelledValue[];

private time: Date;

constructor() {
}

ngOnInit() {
    console.log(this.values);
}

changeValue(item: LabelledValue, newValue: number) {
    item.value = newValue;
    this.time = new Date();
}

isStarSelected(index: number, item: LabelledValue): string {
    if (index < item.value) {
        return 'fas fa-2x fa-minus-square';
    } else {
        return 'far fa-2x  fa-star';
    }
}

getFakeArrayIteration(): any[] {
    return new Array(this.maxValue);
}
}



export class LabelledValue {
  public key: string;
  public label: string;
  public value: number;
}

开始工作。设置适当数量的星星。但是如果值发生变化，您不能设置比初始值更少的星数。不知道怎么回事

【问题讨论】：

我无法重现该问题，它似乎有效？这是 StackBlitz stackblitz.com/edit/…
这很奇怪。因为我在 2 个不同的浏览器上对其进行了测试。你的 StackBlitz 也适合我。
我猜它一定是由您发布的代码之外的东西引起的。如果你可以创建一个 StackBlitz 来重现错误，那么调试它可能会更容易
我不知道是什么原因造成的 :( 自从 2 天以来我一直坚持这个：/
如果你把console.log('Test')添加到你的changeValue函数中，当你设置较少的星星时它会被打印吗？

标签： css angular typescript

【解决方案1】：

问题是因为在第一次添加图标时它以某种方式转换为 svg。状态更改后这不是问题，但不幸的是，在开始时阻止了 css 更改。我还创建了新问题：Prevent svg translation of fontawesome

【讨论】：