角：ngFor未更新的新项目

我用角4建立显示的书籍标题，描述的列表，像下面的评级为心中的应用程序：角：ngFor未更新的新项目

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

对于初始帐套这工作得很好。但是，当我将一个新项目添加到书籍阵列时，只显示一个心脏。然而所有其他属性都设置正确。只要我改变了一些东西，心也会更新并正确显示。

任何猜测我在做什么错？

来源

2017-09-26 dante

你的代码效率很低。每次运行变更检测时，都会调用绑定到组件模板中的方法或getter。如果它返回一个新的对象实例（在你的案例中是数组实例），Angular会得到这样的印象：值永远不会改变。这甚至应该导致像“表达已经改变......”的错误，并且你的应用程序的性能会很糟糕。相反，将getter的结果分配给一个字段并绑定到这些字段以避免此问题，并且只在数组内容实际发生更改后才更新该字段。 –

它看起来像变化检测问题。你正在使用什么变化检测策略。您可以手动进行推送，也可以添加'private changeDetectorRef：ChangeDetectorRef'，然后添加'this.changeDetectorRef.markForCheck（）;'您需要它的地方 –

我认为这个问题可能与组件LifeCycle有关。在数据完成加载之前，模板可能会被构建...（在book.rating值设置之前）。你可以尝试打电话让内心在ngOnInit（）方法中，以确保它被刷新。

另外，Deborah Korata在Pluralsight上的课程“Angular：Getting Started”中展示了产品列表的“五星级”评级，这非常有趣。（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或类似的。

来源

2017-09-26 16:45:19 b0rgBart3

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

来源

2017-09-27 08:02:23 Eliseo

虽然此代码可能有效，但解释如何或为什么是解决方案。 – ItamarG3

小解释：* ngFor对数组有效。我们创建一个“即时”数组并删除第一个字符（数组长度减去所需的数字）。因此，即如果期望的数字是3，我们消除（5-3 = 2个字符），并且我们的数组将是[3,4,5] – Eliseo

角：ngFor未更新的新项目

回答

相关问题