Angular *用于迭代数组的值

我创建了星级评定系统。在Rate属性中，我将评级保持在1到5的范围内。我将Rate属性指定给一个星号数组，其中包含这些值。 我无法正确显示表中的值。例如，评级值为5，应该显示5颗星，在我的情况下，它只显示3颗星。如何解决？ 组成部分：

HTML:

---

欢迎提供任何帮助或建议

这不是3，而是评论数组的长度。您正在迭代3个项目的数组，如果有3条注释，它将始终是3颗星

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

---

不是3，而是你的评论数组的长度。您正在迭代3个项目的数组，如果有3条注释，它将始终是3颗星

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

更改“我喜欢”中的“值”属性

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

到

因为您的x值是动态的，所以要绑定动态值，您需要使用[]方括号更改i like中的value属性

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

到

---

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

因为使用this.stars数组，所以需要5，但得到3

这就是我在我的应用程序中处理类似案例的方式。 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>

---

你需要5，但因为你的this.stars阵列，你得到了3

这就是我在我的应用程序中处理类似案例的方式。 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>

---

您是否在this.stars=this.commentList.mapx=>x.Rate中获得了正确的数据；@AkberIqbal可能重复这不是重复，至少在标记之前试着理解这个问题。。。op的逻辑有问题。您是否在this.stars=this.commentList.mapx=>x.Rate中获得正确的数据；@AkberIqbal可能重复这不是重复，至少在标记之前试着理解这个问题。。。op的逻辑有问题。当然，他们应该公开一个函数，从一个数字中获取一个数组，并且记住，他们不应该在没有OnPush的情况下从模板中调用函数，因为它们会在每个更改检测周期中被触发，或者构建一个管道将一个数字传递到一个数组。但他们显然是新的角度，这是最简单的方法。它不能解决op问题。他希望根据comment.Rate显示5颗星和其中的x颜色建造一个管道确实是一个很好且优雅的解决方案，我肯定会支持这样一个答案，不过对一个新来者解释起来有点难…@Florian我想你还不明白这个问题。他只想显示x个星星的数目。嗯，事实上，看起来就像我推断的那样+1用于推广管道！我有点难过，你没有返回一个迭代器：pSure，那么他们应该公开一个函数，从一个数字中获取一个数组，并记住，他们不应该在没有OnPush的情况下从模板调用函数，因为他们会在每个更改检测周期中被触发，或者构建一个管道，将一个数字传递到一个数组。但他们显然是新的角度，这是最简单的方法。它不能解决op问题。他希望根据comment.Rate显示5颗星和其中的x颜色建造一个管道确实是一个很好且优雅的解决方案，我肯定会支持这样一个答案，不过对一个新来者解释起来有点难…@Florian我想你还不明白这个问题。他只想显示x个星星的数目。嗯，事实上，看起来就像我推断的那样+1用于推广管道！我有点难过，你没有返回迭代器：p

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