角：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未更新的新項目

回答

相關問題