*ngFor 迭代数组的值答案

【问题标题】：*ngFor iterating the values of the array*ngFor 迭代数组的值
【发布时间】：2019-03-12 10:13:45
【问题描述】：

我创建了星级评分系统。在 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>

欢迎任何帮助或建议

【问题讨论】：

this.stars = this.commentList.map(x => x.Rate);
Can I repeat *ngFor an arbitrary number of times using built in angular directives?的可能重复
@AkberIqbal 这不是重复的，至少在标记之前尝试理解问题...... op 的逻辑有问题。

标签： angular typescript

【解决方案1】：

不是 3，而是 cmets 数组的长度。您正在迭代 3 个项目的数组，如果有 3 个 cmets，它将始终是 3 个星。

为您的 cmets 添加 stars 属性：

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

【讨论】：

当然，那么他们应该公开一个函数以从一个数字中获取一个数组，并记住他们不应该在没有OnPush 的情况下从模板调用函数，因为它们会在每个更改检测周期中被触发，或构建一个管道以将数字传递给数组。但它们显然是 Angular 的新手，这是最简单的方法。
它不能解决操作问题。他想根据comment.Rate 显示 5 颗星和其中的 x 色。 + 构建管道确实是一个不错且优雅的解决方案，我肯定会赞成这样的答案，但是向新手解释有点困难......
@Florian 我认为您没有理解这个问题。他只想显示 x 颗星。
嗯，确实，看起来像是我推断的。 +1 用于推广管道！我有点难过你没有回复iterator：p

【解决方案2】：

像这样更改i 中的value 属性

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

到

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

因为你的x值是动态的，所以绑定动态值需要用到[]brackets

【讨论】：

【解决方案3】：

由于您的 this.stars 数组，您需要 5 个但得到 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>

【讨论】：