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

Activity

1. trotyl commented on Feb 10, 2018

   

   trotyl

   on Feb 10, 2018

   Contributor

   More actions

   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.

   👍React with 👍4Reacted by Robert Hopman, Kavitha Kumarasamy, Mark Stein and _
2. FumioNonaka commented on Feb 10, 2018

   

   FumioNonaka

   on Feb 10, 2018

   Author

   More actions

   Thank you for your suggestion. I appended the solution to my article.
3. mhevery

   added

   comp: docs

   on Feb 13, 2018
4. jenniferfell

   added

   freq3: high

   severity3: broken

   comp: examples

   on Feb 15, 2018
5. ngbot

   added this to the needsTriage milestone on Feb 26, 2018
6. avi182 commented on Mar 12, 2018

   

   avi182

   on Mar 12, 2018

   More actions

   How can i check which method is responsible for the id generating?
7. jenniferfell

   added

   type: bug/fix

   freq4: critical

   and removed

   freq3: high

   on Apr 25, 2018
8. ngbot

   modified the milestones: needsTriage, Backlog on Apr 25, 2018
9. jenniferfell

   assigned

   sreevani-ship-it

   on Apr 25, 2018
10. jenniferfell commented on Apr 25, 2018

    

    jenniferfell

    on Apr 25, 2018

    Contributor

    More actions

    docarea=tutorial
11. jenniferfell

    added

    docsarea: tutorial

    on Jun 6, 2018
12. brandonroberts

    added

    state: has PR

    on Jul 5, 2018
13. robphoenix commented on Sep 7, 2018

    

    robphoenix

    on Sep 7, 2018

    Last edited by robphoenix

    Contributor

    More actions

    For anyone else with the same problem that finds this issue, the genId() method should be added into the in-memory-data.service.ts file, there's a gist here - https://gist.github.com/robphoenix/3767cf08772347e02c2434bcf3b84635

    import { InMemoryDbService } from 'angular-in-memory-web-api'
    import { Hero } from './hero'
    
    export class InMemoryDataService implements InMemoryDbService {
      createDb() {
        const heroes = [
          { id: 11, name: 'Mr. Nice' },
          { id: 12, name: 'Narco' },
          { id: 13, name: 'Bombasto' },
          { id: 14, name: 'Celeritas' },
          { id: 15, name: 'Magneta' },
          { id: 16, name: 'RubberMan' },
          { id: 17, name: 'Dynama' },
          { id: 18, name: 'Dr IQ' },
          { id: 19, name: 'Magma' },
          { id: 20, name: 'Tornado' },
        ]
        return { heroes }
      }
    
      // Overrides the genId method to ensure that a hero always has an id.
      // If the heroes array is empty,
      // the method below returns the initial number (11).
      // if heroes array is not empty, the method below returns the highest
      // hero id + 1.
      genId(heroes: Hero[]): number {
        return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11
      }
    }
14. sreevani-ship-it commented on Oct 8, 2018

    

    sreevani-ship-it

    on Oct 8, 2018

    Contributor

    More actions

    Fixed as part of PR #24445
15. sreevani-ship-it

    closed this as completedon Oct 8, 2018
16. angular-automatic-lock-bot commented on Sep 14, 2019

    

    angular-automatic-lock-botBot

    on Sep 14, 2019

    More actions

    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.}
17. angular-automatic-lock-bot

    locked and limited conversation to collaborators on Sep 14, 2019