Question

我正在使用Angular 4构建一个应用程序，该应用程序显示包含标题，描述及其评级的书籍列表，如下所示：

<h2>{{book.title}} <small *ngFor="let h of hearts">❤</small></h2>

为了获得正确数量的心，我创造了这个吸气剂

get hearts() {
  if (this.book.rating < 0) {
    return new Array(0);
  } 

  return new Array(this.book.rating);
}

对于最初的一套书，这很有效。但是当我向书籍数组添加新项目时，只显示一个心脏。但是，所有其他属性都已正确设置。一旦我改变某些东西，心脏就会得到更新并正确显示。

有没有猜到我做错了什么？

Answer 1

我认为问题可能与组件LifeCycle有关。在数据加载完成之前，可能会构建模板...（在设置book.rating值之前）。您可以尝试调用以获取ngOnInit（）方法中的内容以确保它被刷新。

此外，Deborah Korata有一个非常有趣的方式来展示一个＆＃34; 5星＆＃34;在她的课程中对产品列表进行评级称为＆＃34; Angular：入门＆＃34;在Pluralsight上。（http://www.pluralsight.com）。她把评级放在它自己的组件中。然后将其作为选择标记：

<star-rating></star-rating>

组件模板如下所示：

<div class="crop" [style.width.px]="starWidth" [title]="rating">
    <div style="width: 86px">
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
    </div>
 </div>

关于这种方法的一个很酷的事情是它实际上可以显示半星/百分比的恒星，而不是仅仅为3.5或类似的等级的整个恒星。

Answer 2

<small *ngFor="let item of [1,2,3,4,5].slice(5-book.rating)">❤</small>

Angular：新项目的ngFor未更新

2 个答案: