Collections multiples dans Angular-in-memory-web-api

Question

Comment créer multiple les collections utilisant Angular-in-memory-web-api ? Ce n'est pas un problème avec la collection unique. Mais je ne suis pas capable de l'implémenter pour des collections multiples.

Par exemple, je veux créer deux collections dans la base de données mémoire - Pays et Villes. Avez-vous une idée de la façon de procéder ?

Answer 1

Il suffit de lui retourner un objet avec les deux tableaux. Dans l'exemple d'Angular, vous voyez quelque chose comme

createDb() {
  let heroes = [ .. ]
  return { heroes }
}

Si vous ne le savez pas déjà, { heroes } est juste un raccourci pour écrire { heroes: heroes } . Donc, si vous avez deux collections, il suffit de l'ajouter comme une autre propriété.

createDb() {
  let heroes = [ .. ];
  let crises = [ .. ];
  return { heroes, crises };
  // or { heroes: heroes, crises: crises }
}

Le nom de la propriété retournée sera utilisé pour le chemin d'accès dans l'URL. Vous pouvez donc utiliser

/api/heroes/1
/api/crises/1

Answer 2

L'approche décrite dans le La réponse de Paul est correct, mais il y a un détail qui m'a échappé et que j'aimerais ajouter : Comment spécifier genId correctement, afin que cela fonctionne pour les deux collections ?

La réponse se réfère à l'exemple "Heroes" écrit en TypeScript (un sur-ensemble de JavaScript), et plus particulièrement la fonction Chapitre HTTP . Là, une table heroes est simulée par la mise en œuvre :

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const heroes = [
      { id: 11, name: 'Mr. Nice' },
      { id: 12, name: 'Narco' },
      // ...
      { 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 the 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;
  }
}

Maintenant, si vous ajoutez un 2ème collection crises comme indiqué dans sa réponse, c'est-à-dire :

createDb() {
  let heroes = [ { ... }, ... ];
  let crises = [ { ... }, ... ];
  return { heroes, crises };
  // or { heroes: heroes, crises: crises }
}

comment fournissez-vous genId pour les deux collections (à condition qu'elles soient de type Hero y Crises ) ? La surcharge, comme vous le feriez en C# ne fonctionne pas en TypeScript, car elle déclencherait une erreur ("Duplicate function implementation").

---

Solution : J'ai découvert que vous pouvez résoudre ce problème avec Les génériques de TypeScript comme suit. Remplacer l'otiginal genId par la version générique suivante :

genId<T extends Hero | Crises>(myTable: T[]): number {
  return myTable.length > 0 ? Math.max(...myTable.map(t => t.id)) + 1 : 11;
}

Ce qui est important ici, c'est la partie <T extends Hero | Crises> : Cela signifie que le type T peut être soit Hero o Crises : Il sera donc invoqué si le paramètre passé est soit de type Hero[] o Crises[] .

Avec cette connaissance, L'ajout d'une 3ème, 4ème, ... classe est simple : Il suffit d'ajouter la classe. Disons que nous voulons ajouter la classe SuperHero alors vous l'ajoutez simplement via | SuperHero Ainsi, cela ressemblerait à :

genId<T extends Hero | Crises | SuperHero>(myTable: T[]): number {
  return myTable.length > 0 ? Math.max(...myTable.map(t => t.id)) + 1 : 11;
}

Nota: Comme condition préalable, tous les cours ( Hero , Crises y SuperHero ) doivent avoir une valeur numérique id propriété déclarée.

---

Liens utiles :

• Chapitre HTTP du tutoriel Angular

• In-Memory-Web-API : GenId personnalisé

• Peut-on spécifier plusieurs contraintes de type pour les génériques TypeScript ?

Answer 3

Pour ajouter à cette discussion, j'ai dû utiliser Partial car il n'arrêtait pas de dire qu'il me manquait un identifiant lorsque je terminais le Tour of Heroes Lesson 06. J'ai utilisé la messagerie pour voir jusqu'où allait le code avant qu'il ne cesse de fonctionner. Vous pouvez donc ignorer les lignes this.log, mais vous pouvez les ajouter à votre propre projet pour faciliter le débogage. Tout d'abord, j'ai mis à jour le addHero comme suit :

`addHero(hero: string): void { this.log(In addHero of HeroesComponent, name is: ${hero}`);

if (!hero)
{
  this.log(`In if(!hero.name) of add hero: ${hero}`);
  return;
}

this.heroService.addHero({ name: hero } as Partial<Hero>)
  .subscribe(hero => {
    this.heroes.push(hero);
  });`` 

}

Puis j'ai mis à jour le fichier heroes.service.ts pour utiliser le héros partiel et permettre au code de générer son propre identifiant à partir du fichier in-memory-data.service.ts :

addHero(hero: Partial): Observable { this.log(`In addHero: heroeName is: ${hero.name}`); return this.http.post(this.heroesUrl, hero, this.httpOptions).pipe( tap((newHero: Hero) => this.log(`added hero with string id=${newHero.id}`)), catchError(this.handleError("Error in addHero"))); }

D'après ce que je peux voir, cela fonctionne maintenant comme prévu. Il y a peut-être encore du code à mettre à jour, mais cela devrait aider tous ceux qui ont le message d'erreur suivant :

ERROR in src/app/heroes/heroes.component.ts:52:30 - error TS2352: Conversion of type '{ name: never; }' to type 'Hero' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Property 'id' is missing in type '{ name: never; }' but required in type 'Hero'.