1
votes

* ngPour itérer les valeurs du tableau

J'ai créé un système de notation par étoiles. Dans la propriété Rate , je garde la note sur une échelle de 1 à 5. J'ai attribué la propriété Rate à un tableau Stars dans lequel ces les valeurs sont.
J'ai un problème avec l'affichage correct des valeurs du tableau. Par exemple, la valeur de la note est 5 et devrait afficher 5 étoiles et dans mon cas, elle n'affiche que 3. Comment le résoudre?
Composant:

 <div class="row" *ngFor="let comment of commentList">
  <div class="col-sm-12">
   Comment: {{comment.Comment}} <br/> 
   Your rating: {{comment.Rate}}
  </div>
  <div class="col-sm-6" >
    <ul class="list-inline ratingList" *ngFor="let x of stars">
      <li >
          <i value="x"  class="fa fa-star fa-lg"></i> 
      </li>
    </ul>
  </div>
</div>

HTML:

 export class RatingStarComponent implements OnInit {

  commentList: Rating[];
  stars: number[];
  constructor(private productService: CategoriesProductsService, private router: Router ) { }

  ngOnInit() {
    this.productService.getComment().subscribe(data => {
      this.commentList = data;
      this.commentList = this.commentList.filter(x => x.ProductId === this.products.Id);
      this.stars = this.commentList.map(x => x.Rate);
      console.log('Comment List:', this.commentList);
      console.log('Stars:', this.stars);
    });
  }

Toute aide ou suggestion est la bienvenue

typescript angular

3 commentaires

obtenez-vous des données correctes dans this.stars = this.commentList.map (x => x.Rate);

Copie possible de Can Je répète * ngPour un nombre arbitraire de fois en utilisant des directives angulaires intégrées?

@AkberIqbal ce n'est pas un doublon, essayez au moins de comprendre la question avant de signaler ... op a un problème avec sa logique.

3 Réponses :

4
votes

Ce n'est pas 3, c'est la longueur de votre tableau de commentaires. Vous itérez sur le tableau de 3 éléments, ce sera toujours 3 étoiles s'il y a 3 commentaires.

Ajoutez la propriété stars à vos commentaires:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'toArray'})
export class ToArrayPipe implements PipeTransform {
  transform(value: number): any[] {
    return new Array(value);
  }
}

Et itérez séparément pour chaque commentaire:

<ul class="list-inline ratingList" *ngFor="let x of comment.stars">
  <li >
    <i value="x"  class="fa fa-star fa-lg"></i> 
  </li>
</ul>

Vous pourriez probablement créer un tube toArray pour renvoyer un tableau à partir du Rate et utilisez-le comme ceci:

* ngFor = "let x of (comment.Rate | toArray)"

De cette façon, vous avez gagné Vous n'avez pas besoin de muter votre tableau commentList comme ceci:

// this.commentList = this.commentList // .map (comment => Object.assign (comment, {stars: new Array (comment.Rate)}));

Pipe renverra un tableau de longueur à partir du nombre (Rate dans votre exemple):

this.commentList = this.commentList.map(comment => Object.assign(comment, {stars: new Array(comment.Rate)}));

4 commentaires

Bien sûr, ils doivent exposer une fonction pour obtenir un tableau à partir d'un nombre et garder à l'esprit qu'ils ne doivent pas appeler de fonctions à partir d'un modèle sans OnPush car ils seront déclenchés à chaque cycle de détection de changement, ou créer un pipe pour diriger un nombre vers un tableau. Mais ils sont évidemment nouveaux en angular et c'est le moyen le plus simple.

cela ne résout pas le problème opérationnel. Il souhaite afficher 5 étoiles et en colorier x en fonction du comment.Rate . + construire une pipe est en effet une solution agréable et élégante, je voterais définitivement pour une telle réponse, mais un peu plus difficile à expliquer à un nouveau venu ...

@Florian Je ne pense pas que vous ayez compris la question. Il veut juste afficher x nombre d'étoiles.

hmm en effet, on dirait que j'ai extrapolé. +1 pour la promotion de la pipe! Je suis un peu triste que vous ne renvoyiez pas un itérateur : p

0
votes

Remplacez l'attribut value dans i comme ceci

<i [value]="x"  class="fa fa-star fa-lg"></i>

par

<i value="x"  class="fa fa-star fa-lg"></i>

parce que votre valeur x est dynamique pour lier la valeur dynamique dont vous avez besoin pour utiliser [ewisebrackets

0 commentaires

0
votes

Vous avez besoin de 5 mais en obtenir 3 à cause de votre tableau this.stars

C'est ainsi que j'ai géré un cas similaire dans mon application. this.starWidth = this.rating * 75/5;

html

<div class="row" *ngFor="let comment of commentList">
          <div class="col-sm-12">
           Comment: {{comment.Comment}} <br/> 
           Your rating: {{comment.Rate}}
          </div>
          <div class="col-sm-6" >
            <div [style.width.px]="comment.Rate * 75 / 5 " >
                <div style="width: 75px">
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                </div>
            </div>
          </div>
        </div>

probablement, dans votre cas p >

<div [style.width.px]="starWidth" >
      <div style="width: 75px">
        <span class="fa fa-star"></span>
        <span class="fa fa-star"></span>
        <span class="fa fa-star"></span>
        <span class="fa fa-star"></span>
        <span class="fa fa-star"></span>
      </div>
    </div>

0 commentaires