Best way to display list of object in angular dart

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)

Leave a Reply

Your email address will not be published. Required fields are marked *