module.ts

Question

我正在使用棱角5.我想将我的评级数显示为星级。我怎样才能做到这一点？我看过很多关于星级评分的教程，但是只有当用户给出评级时它们才有用。我只想让我的号码显示为用户的星级评分。这就是我在做什么。

app.component.html

=SUMPRODUCT(--AND(A1:D1=E1:H1))

app.component.html

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

import { AngularFirestore, AngularFirestoreCollection } from 
'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
templateUrl: 'app.component.html'
}) 
export class AppComponent implements OnInit  {
users: Observable<any[]>;


constructor(private afs: AngularFirestore) {


this.users = this.afs.collection('users').valueChanges();
}

ngOnInit() {


}


  }

我想将user.rating显示为星级评分。任何帮助将不胜感激。三江源

Answer 1

你可以使用角度星级。首先安装角星级 npm install angular-star-rating --save

然后将其添加到您的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';  


// IMPORT YOUR LIBRARY
import { StarRatingModule } from 'angular-star-rating';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // SPECIFY YOUR LIBRARY AS AN  IMPORT
    StarRatingModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts中的

而不只是{{user.rating}} 你可以用这个

<star-rating-comp [starType]="'svg'" [rating]="user.rating"></star-rating-comp>

否则，您可以创建自己的简单星级评分如下

<span *ngFor="let rat for user.rating" class="fa fa-star checked"></span>

CSS -

.checked {
    color: orange;
}

Answer 2

This link will help you

ng-starring是您需要的方法，此链接将您带到npm的站点。使用npm install ng-starrating安装它。然后导入，import { RatingModule } from 'ng-starrating'; 不要忘记将其添加到导入中。

imports: [ BrowserModule, RatingModule ],

最后，您需要放这个。

  <star-rating value="5" checkedcolor="red" uncheckedcolor="black" size="24px"    readonly="false" (rate)="onRate($event)"></star-rating>

Answer 3

Primeng RatingModule可能会帮助：-

设置链接-https://www.primefaces.org/primeng/#/setup

1) npm install primeng --save
2) npm install primeicons --save

https://www.primefaces.org/primeng/#/rating

module.ts

import {RatingModule} from 'primeng/rating';

imports: [
       RatingModule
    ]

.html

<p-rating [(ngModel)]="val1"></p-rating>

Answer 4

star-rating.html

    <div [formGroup]="parentFormGroup">
        <fieldset class="rating">
            <input type="radio" id="star5" [formControlName]="controlName" [value]="5" /><label class="full" for="star5"
                title="Excellent"></label>
            <input type="radio" id="star4half" [formControlName]="controlName" [value]="4.5" /><label class="half"
                for="star4half" title="Excellent"></label>
            <input type="radio" id="star4" [formControlName]="controlName" [value]="4" /><label class="full" for="star4"
                title="Good"></label>
            <input type="radio" id="star3half" [formControlName]="controlName" [value]="3.5" /><label class="half"
                for="star3half" title="Good"></label>
            <input type="radio" id="star3" [formControlName]="controlName" [value]="3" /><label class="full" for="star3"
                title="Average"></label>
            <input type="radio" id="star2half" [formControlName]="controlName" [value]="2.5" /><label class="half"
                for="star2half" title="Average"></label>
            <input type="radio" id="star2" [formControlName]="controlName" [value]="2" /><label class="full" for="star2"
                title="Fair"></label>
            <input type="radio" id="star1half" [formControlName]="controlName" [value]="1.5" /><label class="half"
                for="star1half" title="Fair"></label>
            <input type="radio" id="star1" [formControlName]="controlName" [value]="1" /><label class="full" for="star1"
                title="Poor"></label>
            <input type="radio" id="starhalf" [formControlName]="controlName" [value]="0.5" /><label class="half"
                for="starhalf" title="Poor"></label>
        </fieldset>
    </div>

star-rating.ts

    import { Component, Input, OnInit } from '@angular/core';
    import { FormControl, FormControlName, FormGroup } from '@angular/forms';

    @Component({
    selector: 'ma-star-ratings',
    templateUrl: './star-ratings.component.html',
    styleUrls: ['./star-ratings.component.css']
    })
    export class StarRatingsComponent implements OnInit {

    @Input() controlName: any;
    @Input() parentFormGroup: FormGroup;
    constructor() { }

    ngOnInit(): void {
        // this.parentFormGroup.patchValue({
        //   [this.controlName] : 4
        // })
    }

    }

style.scss

    .rating {
    border: none;
    float: left;
    }

    .rating>input {
    display: none;
    }

    .rating>label:before {
    margin: 0.5rem;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
    }

    .rating>.half:before {
    content: "\f089";
    position: absolute;
    }

    .rating>label {
    color: #ddd;
    float: right;
    font-size: 1.4rem;
    }


    .rating {
        >input {
            &:checked~label {
            color: $orange !important;

            &:hover {
                color: $orange !important;
            }
            }

            &:not(:checked)~label {
            &:hover {
                color: $orange !important;

                ~label {
                color: $orange !important;
                }
            }
            }
        }

        >label {
            font-size: 2.8rem;
            cursor: pointer;
        }
        }

想要在角度5中显示星级的数字

4 个答案:

module.ts

.html