Aurelia 2 - `repeat.for` not working with JavaScript `Set` collections

vNext
1

In Aurelia 2, I have an issue with rendering a repeated element in a view using a Set collection in the viewmodel.

The following sample code is based on the samples in Rendering Collections. (I only changed the code somewhat so that it is now possible to greet multiple friends in a specific language.)

MyApp.html:

<h1>My Friends</h1>
<p repeat.for="[name, info] of friends">${info.message}, ${name}!</p>

MyApp.ts:

interface FriendInfo {
  message: string;
}

export class MyApp {
  friends = new Map<string, FriendInfo>([
    ['Alice', { message: 'Hello' }],
    ['Bob', { message: 'Hola' }],
    ['Carol', { message: 'Ni Hao' }],
    ['Dana', { message: 'Molo' }]
  ]);
}

With this code, Aurelia vNext currently renders empty strings for the greetings and the names. However, in Aurelia v1, this code seems to work just fine.

Am I perhaps doing something wrong here?

1 Like
2

Thanks for creating this, I’ll have a look and update here

3

Destructuring in expressions is not yet implemented in v2. As a workaround you can do this:

<p repeat.for="friend of friends">${friend.value.message}, ${friend.key}!</p>
1 Like
4

Ah. Thanks. I understand.

Well, the key and value properties don’t work for me either. The rendered friend.value.message is an empty string and the rendered friend.key is the string “undefined”. Using an array indexer on friend is possible, however, so I changed it to this:

<p repeat.for="friend of friends">${friend[1].message}, ${friend[0]}!</p>

It does not deserve a beauty award, but it works for now.

1 Like