Question

我创建了星级评定系统。在Rate属性中，我将评分保持在1到5的范围内。我将Rate属性分配给了这些值所在的Stars数组。
我无法正确显示表格中的值。例如，等级值为5，应该显示5星，而在我的情况下，它仅显示3。如何解决它？
组件：

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

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

欢迎任何帮助或建议

Answer 1

不是3，而是您的注释数组的长度。您正在遍历3个项目的数组，如果有3条评论，它将永远是3星。

在评论中添加星星属性：

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

并对每个评论分别进行迭代：

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

您可能可以制作一个toArray管道，以从Rate数字中返回一个数组，并像这样使用它：

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

这样，您就不必像这样突变commentList数组：

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

Pipe将从数字中返回一个长度的数组（在您的示例中为Rate）：

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

Answer 2

像这样在value中更改i属性

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

到

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

因为您的x值是动态的以绑定动态值，所以您需要使用[]括号

Answer 3

您需要5个，但由于您的this.stars阵列而获得3个

这就是我在应用中处理类似案件的方式。 this.starWidth = this.rating * 75 / 5;

html

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

可能是您的情况

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

* ng用于迭代数组的值

3 个答案:

html