Ionic2 + Angular2 - dynamische Rate Wert mit Ion-Icon-Star

Question

Ich versuche, eine einfache dynamische Rate von 0 bis 5 Sterne (und seine mittleren Werte wie x.5 [Beispiel 4.5]), die einen Wert von der erhält Javascript.

Ich suchte nach etwas mit * ngFor, aber ich verstehe nicht, wie das funktioniert. Kann mir jemand erklären/helfen?

Wenn es hilft, für ionische, haben wir 3 Arten von Sternen zur Verfügung:

<ion-icon name="star"></ion-icon> 
<ion-icon name="star-half"></ion-icon> 
<ion-icon name="star-outline"></ion-icon> 

Zum Beispiel, wenn ich vom Server ein Wert Rate erhalten = 3,5, es macht:

<ion-icon name="star"></ion-icon> 
<ion-icon name="star"></ion-icon> 
<ion-icon name="star"></ion-icon> 
<ion-icon name="star-half"></ion-icon> 
<ion-icon name="star-outline"></ion-icon> 

I benutze Javascript, kein Typoskript.

Vielen Dank :)

p.s. wenn dieser Titel, desto besser ist nicht sicher, ist jeder Vorschlag willkommen :)

Answer 1

Hier ist eine Möglichkeit, es zu tun:

<ion-item> 
    <ion-icon *ngIf="myRating>=1" name="star"></ion-icon> 
    <ion-icon *ngIf="myRating>=2" name="star"></ion-icon> 
    <ion-icon *ngIf="myRating>=3" name="star"></ion-icon> 
    <ion-icon *ngIf="myRating>=4" name="star"></ion-icon> 
    <ion-icon *ngIf="myRating>=5" name="star"></ion-icon> 
    <ion-icon *ngIf="myRating%1!=0" name="star-half"></ion-icon> 
    <ion-icon *ngIf="myRating==0" name="star-outline"></ion-icon> 
    <ion-icon *ngIf="myRating<=1" name="star-outline"></ion-icon> 
    <ion-icon *ngIf="myRating<=2" name="star-outline"></ion-icon> 
    <ion-icon *ngIf="myRating<=3" name="star-outline"></ion-icon> 
    <ion-icon *ngIf="myRating<=4" name="star-outline"></ion-icon> 
</ion-item> 

Es braucht mehr Platz im HTML, aber keine zusätzlichen Javascript erforderlich. Hier ist myRating der Sternwert. Ich habe es für alle 11 möglichen Werte getestet.

Answer 2

Wenn Sie einen Array haben wie

value = ['star', 'star', 'star', 'star-half', 'star-outline']; 

Sie ngFor verwenden können Sie Ihre HTML wie

<ion-icon *ngFor="let icon of icons" [name]="icon"></ion-icon> 

oder abhängig zu machen auf was name ist (Eigenschaft oder Attribut)

<ion-icon *ngFor="let icon of icons" name="{{icon}}"></ion-icon> 

Answer 3

Eine Alternative wäre, eine Funktion mit Switch-Fall zu erstellen oder den Typ des Symbols zurückzugeben, um Code HTML zu bereinigen.

html:

<Ion-item> 
   <Ion-icon [name]="validate(myRating)"> </ion-icon> 
</Ion-item> 

Funktion:

Validate(e:string): string { 
   Let res; 
   if (e> 1){ 
   res="star"; 
    } 
    else { 
  res="star-outline"; 
    } 

   Return result; 
} 

Answer 4

ich diese Lösungen erreicht haben die Tipps, die Sie Jungs zur Verfügung gestellt:

function printRating (rating) { 

    let max_rate  = 5; 
    let rounded_rating = Math.round(rating); 
    let array_stars = new Array(max_rate); 
    array_stars.fill('star-outline'); 

    for(let i=0; i < rounded_rating; i++) { 
    array_stars[i] = 'star'; 

    if(i === rounded_rating - 1 && rating % 1 !== 0) { 
     array_stars[i] = 'star-half'; 
    } 
    } 

    return array_stars; 
} 

In meiner Komponente I zugeordnet haben zu einer Variablen das Ergebnis Array

this.stars = this.printRating(this.seller.rating); 

Und schließlich in der Ansicht gedruckt ich auf dem Ergebnis-Array basierte

<ion-icon *ngFor="let star of stars" name="{{star}}"></ion-icon> 

Hoffnung hilft dies jemand!