Tutorial example has a problem to enter new item into an empty list

I’m submitting a…

[x] Documentation issue or request

Current behavior

“Angular Example - Tour of Heroes: Part 6” in the tutorial of Angular 5 has a problem to enter an item into the heroines.component.

1. Delete all items from the list of the heroines.component.
2. Enter new item in the text field and press the [add] button.

Then listed item has neither id nor name. Browser console indicates the error message like below:

body: {error: "Collection 'heroes' id type is non-numeric or unknown. Can only generate numeric ids."}

Expected behavior

New item can be entered even if the list is empty. I recommend to revise the code as “Angular 5 Example - To be able to enter new item to empty list” shows.

Minimal reproduction of the problem with instructions

See the “Current behavior” above.

What is the motivation / use case for changing the behavior?

Confused when learning the tutorial sample.

Environment

Angular version: 5.2.4


Browser:
- [x] Chrome (desktop) version 64.0.3282.140
- [x] Firefox version 58.0.1
- [x] Safari (desktop) version 11.0.3
 
For Tooling issues:
- Platform: macOS Sierra 10.12.6

[trotyl]

Nice catch, currently the in-memory-db would only auto-increase the id when there’s existing id property and they’re numeric:

protected isCollectionIdNumeric<T extends { id: any }>(collection: T[], collectionName: string): boolean {
  // collectionName not used now but override might maintain collection type information
  // so that it could know the type of the `id` even when the collection is empty.
  return !!(collection && collection[0]) && typeof collection[0].id === 'number';
}

Suggested fix: override the genId method as we know a Hero should always have an id:

genId(heroes: Hero[]): number {
  return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 1;
}

Demo here.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}