<p dir="auto">I can make changes to an object displayed in an <code class="notranslate">*ngFor</code> repeater with <code class="notranslate">trackBy</code> ... until I do something to trigger <code class="notranslate">trackBy</code> intervention.</p>
<p dir="auto"><em>NgForTrackBy</em> indeed does prevent unnecessary DOM updates when the list is refreshed with "new" content that satisfies the <em>trackBy</em> selection criteria.</p>
<p dir="auto">However, it is a little too rigorous. Once I trigger it, it no longer updates the view with changes to the data-bound object.</p>
<p dir="auto">Here is a <a href="http://plnkr.co/edit/gFhiYPk9gk9YyDq7lQ16?p=preview" rel="nofollow">plunker repro</a>.</p>
<ul dir="auto">
<li>Change the name ... both repeater displays update</li>
<li>Click <em>Refresh Heroes</em> a few times. Each click replaces the heroes list with a new array of hero clones.</li>
<li>Note the message under the first (no trackBy) display that reports each time the DOM elements have changed.</li>
<li>Note that no such message appears under the second (with trackBy) display because the DOM elements are untouched. Although the hero objects change, <em>trackBy</em> doesn't replace the DOM elements.  <strong>That's exactly what we want from <em>trackBy</em>!</strong></li>
<li>Now change the name again. <strong>SAD FACE!</strong> The second (with trackBy) display is frozen. The changes do not appear.</li>
</ul>
<p dir="auto">This behavior makes <code class="notranslate">ngForTrackBy</code> essentially useless.</p>
<ul dir="auto">
<li>the displayed list is semi-immutability, which fits few if any scenarios</li>
<li>we can't update the displayed object in any way once frozen</li>
<li>this is no good for <em>mutable</em> entity scenarios</li>
<li>this is no good for <em>redux</em> or <em>immutable</em> scenarios either ... because we see only the last mutated state of the entities, not the refreshed entities (as they might be after re-query from a server).</li>
</ul>
<p dir="auto">Here is an animated gif showing the unexpected and unwanted behavior.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/129061/12870420/c1878da4-ccf8-11e5-8a84-6a757a44ece9.gif"><img src="https://cloud.githubusercontent.com/assets/129061/12870420/c1878da4-ccf8-11e5-8a84-6a757a44ece9.gif" alt="ng-for-track-by" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto">Notice the last few frames where I make changes <strong>_after</strong>_ freezing the second <em>trackBy</em> display .</p>
<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
When Resolve returns Observable and non-false value is resolved, navigation should continue, but it doesn't.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Navigation should proceed and resolved data should be passed to ActivatedRoute.data field.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="http://plnkr.co/edit/eJpzsXEM5CyurCs4jc1e?p=preview" rel="nofollow">http://plnkr.co/edit/eJpzsXEM5CyurCs4jc1e?p=preview</a></p>
<p dir="auto">In menu click on "Second Link - Correct using Resolve"</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Fedora 24</strong></p>
</li>
<li>
<p dir="auto"><strong>Angular version:</strong> 2.1.2</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [ Chrome 54 | Firefox 49 ]</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [TypeScript 2]</p>
</li>
</ul>