0

Gostaria de criar um laço de repetição, mas nesse laço eu já tenho a quantidade de vezes que ele vai executar. Segue abaixo um exemplo do resultado esperado usando javascript.

for(i = 0; i < 5; i++) {
    console.log( i + 'estrelas!');
}

No AngularJS 2, acredito que seria feito assim (é só um exemplo, já sei que não funciona mas procuro algo semelhante).

<ion-icon *ngFor="1 to 5" name="star"></ion-icon>

1 Resposta 1

3

Seguindo apenas o padrão do Angular2 a syntax correta seria essa:

<div *ngFor="#hero of heroes">{{hero.fullName}}</div>

Onde ele apenas substitui a mesma função de ng-repeat do Angular 1.x, onde ele irá fazer o loop por toda a extensão de sua array, você não precisa nem especificar nem saber qual é a extensão dela. Se for 5, 10 ou 300 o ngFor irá passar por todas. A diferença entre o ngFor e o for() que você se refere, é que o ngFor é aplicado diretamente no template, ou seja, se você deseja fazer alguma manipulação dos dados antes de passar para a view, isso deve ser feito ainda no component responsável, ai sim você pode usar o for() para somente depois passar para sua view (html).

Tudo vai depender do seu objetivo.


Editado:

Confesso que nunca usei Ionic, mas se a lógica for a mesma que o uso de icon-font (o que imagino que seja) você pode usar um ng-class para aplicar a classe correspondente a quantidade de votos. Por exemplo:

<i [ngClass]="{
    'ion-android-star-outline': valorEstrela < 1, 
    'ion-android-star': valorEstrela >= 1}">
</i>
<i [ngClass]="{
    'ion-android-star-outline': valorEstrela < 2,
    'ion-android-star': valorEstrela >= 2}">
</i>
<i [ngClass]="{
    'ion-android-star-outline': valorEstrela < 3, 
    'ion-android-star': valorEstrela >= 3}">
</i>
<i [ngClass]="{
    'ion-android-star-outline': valorEstrela < 4, 
    'ion-android-star': valorEstrela >= 4}">
</i>
<i [ngClass]="{
    'ion-android-star-outline': valorEstrela < 5, 
    'ion-android-star': valorEstrela >= 5}">
</i>

Deste modo, você deve apenas atribuir o valor recebido do banco à propriedade valorEstrela e ela irá aplicar a classe correspondente ao preenchimento. De novo, como nunca usei Ionic não sei se existe uma opção melhor, mas acredito que essa que passei deva resolver seu problema de modo mais prático.

8
  • Meu objetivo é não trabalhar com vetor... É um esquema para rating, volta do banco um inteiro 4 por exemplo. Eu pego esse inteiro e tenho que printar 4 estrelas na tela.. Porém é um inteiro não um vetor. 27/04/2016 às 19:09
  • Então não é o ngFor que irá usar, pois ele serve para interagir pelos objetos de uma array e exibir cada um deles na tela. Para atingir o seu objetivo seria necessário o uso de outra lógica. 27/04/2016 às 23:53
  • Então @CelsomTrindade, eu sei que não é, usei ele apenas para expor minha necessidade.. 28/04/2016 às 13:56
  • É essa outra lógica que estou atrás, eu resolvi criando um vetor alocando a quantidade de posições necessárias oque é gambiarra =/ 28/04/2016 às 13:57
  • @HiagoSouza Você está usando o que para exibir essas estrelas? Icon font? 28/04/2016 às 14:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .