Issue
I have the following data structures:
Map<String, MyClass> items;
A map of all my items I have loaded from the database.
List<String> selectedItems;
The currently selected items to display in a list.
I now want to display the list in a ngFor loop in a html page. How would I write the access function to the items? It should of course also detect updates in the objects.
<div *ngFor="let item of selectedItems">
{{ items[item].name }}
</div>
The items themselves are from a redux store. So whenever something in the item changes also the object is recreated as a copy. But the list is only recreated if the selection changes.
Solution
If you only want to access the values you can use
<div *ngFor="let item of items.values">
{{ item.name }}
</div>
if you want to use keys and values you can do
<div *ngFor="let key of items.keys">
{{ key }} - {{ items[key].name }}
</div>
if you want to use selectedItems
use
<div *ngFor="let item of selectedItems">
{{ item }}
</div>
if the selectedItems contains the keys, you can use
<div *ngFor="let item of selectedItems">
{{ items[item].name }}
</div>
Answered By – Günter Zöchbauer
Answer Checked By – Timothy Miller (FlutterFixes Admin)