Question

我与角度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;
}

开始工作。设置适量的星星。但是如果价值发生变化，你就不能设置比初始值更少的恒星。我不知道出了什么问题

Answer 1

问题是由于在首次添加图标时会以某种方式将其翻译为svg。在状态发生变化之后，这不是一个问题，但在开始时不幸的是css的阻塞变化。我还创建了新问题：Prevent svg translation of fontawesome

ngClass不刷新css类

1 个答案: