Ionic2 + Angular2 - динамическое значение скорости с звездой иконок

Я пытаюсь построить простую динамическую скорость от 0 до 5 звезд (и ее средние значения, такие как x.5 [пример 4.5]), которая получает значение из JavaScript.Ionic2 + Angular2 - динамическое значение скорости с звездой иконок

Я искал что-то с * ngFor, но я не понимаю, как это работает. Может кто-нибудь объяснить/помочь мне?

Если это помогает, для ионной, у нас есть 3 типа звезд в наличии:

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

Например, если я получаю от сервера скорость значение = 3,5, он оказывает:

<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 Я использую javascript, не машинопись.

Большое вам спасибо:

стр. не уверен, если это название лучше, любое предложение приветствуется :)

источник

2016-05-25 sandrina-p

один из способов сделать это:

<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>

Это занимает больше места в HTML, но не требует каких-либо дополнительных JavaScript. Здесь myRating - звездное значение. Я проверил его на все 11 возможных значений.

источник

2016-05-25 18:52:31 wdickerson

Ничего себе, это не лучший способ, но это действительно умный способ, он работает! Огромное спасибо :) –

Если у вас есть массив как

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

вы можете использовать ngFor, чтобы сделать ваш HTML, как

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

или в зависимости на что name (свойство или атрибут)

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

источник

2016-05-25 13:14:22

Благодарю вас за ответ. не могли бы вы лучше объяснить мне, как я преобразую значение, например - 3.5, в массив значений? –

Вот что я придумал: https://jsfiddle.net/k4a3mw7n/ – rinukkusu

Мой подход https://plnkr.co/edit/X8qc3oWPKAXhxpwe7ryt?p = preview Я вычисляю строку значка из текущего индекса и переданного значения. –

Альтернативой было бы создать функцию с корпусом коммутатора или вернуть тип значка, чтобы очистить код html.

HTML:

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

функция:

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

   Return result; 
}

источник

2017-04-19 14:43:48

Я достиг этого решения с помощью советов, которые вы, ребята, предоставленные:

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; 
}

В моем компоненте я связанных к переменной массив результатов

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

И, наконец, в представлении я напечатал на основе результирующего массива

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

Надеется, что это помогает кто-то!

источник

2017-07-21 22:42:55

Ionic2 + Angular2 - динамическое значение скорости с звездой иконок

ответ

Смежные вопросы