Angular英雄之旅和内存数据服务

Question

我目前正在阅读 Angular.io 英雄之旅教程，在进行过程中做了一些非常小的更改，因此我不会 100% 复制教程。

我已经读到关于 http 的第六部分，更具体地说，我正在使用 In Memory Web Api 服务通过 id 获取值。

Most web APIs support a get by id request in the form api/hero/:id (such as api/hero/11). Add a HeroService.getHero() method to make that request:

我运行在实现这部分时遇到了问题，因为我对代码做了一些小改动。我的数据对象与示例不同，它们被命名为动物，具有额外的属性，并且这些属性被大写。

教程代码

getHero(id: number): Observable<Hero> {
  const url = `${this.heroesUrl}/${id}`;
  return this.http.get<Hero>(url).pipe(
    tap(_ => this.log(`fetched hero id=${id}`)),
    catchError(this.handleError<Hero>(`getHero id=${id}`))
  );
}

import { InMemoryDbService } from 'angular-in-memory-web-api';

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};
  }
}

我的代码

getAnimal(id: number): Observable<Animal>{
    const url = `${this.animalsUrl}/${id}`;
    return this.http.get<Animal>(url).pipe(
        tap(_ => this.log('fetched animal id=${id}')),
        catchError(this.handleError<Animal>('getAnimal id=${id}'))      
    );
  }

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const animals = [
      { Id: 11,Breed:"Guinea Pig", Name: 'Butter Bean' },
      { Id: 12,Breed:"Guinea Pig", Name: 'Coco Bean' },
      { Id: 13,Breed:"Cat", Name: 'Mia' },
      { Id: 14,Breed:"Cat", Name: 'Bowie' },
      { Id: 15,Breed:"Cat", Name: 'Mercury' },
      { Id: 16,Breed:"Cat", Name: 'Claude' },
      { Id: 17,Breed:"Dog", Name: 'Bobby' },
      { Id: 18,Breed:"Gecko", Name: 'Reggie' },
      { Id: 19,Breed:"Gecko", Name: 'Luna' },
      { Id: 20,Breed:"Gecko", Name: 'Lizard Face' }
    ];
    return {animals};
  }
}

这不起作用的原因是我将对象的 ID 属性大写，修复只是将其改回 "id"。

但是，我想在动物对象上将 id 保持大写为 "Id"，但我不知道如何做到这一点并使 getAnimal 方法与它一起工作。这可能与 In Memory Web Api 相关吗？如果可以，有人能帮助我吗？

Answer 1

您必须将 Animal class 的属性从 id 更改为 ID，并且它始终在数组中指定类型以在编译时本身获取类型错误。

interface Animal{
Id:string
}

const animals:Animals[] = [
      { Id: 11,Breed:"Guinea Pig", Name: 'Butter Bean' },
      { Id: 12,Breed:"Guinea Pig", Name: 'Coco Bean' },
      { Id: 13,Breed:"Cat", Name: 'Mia' },
      { Id: 14,Breed:"Cat", Name: 'Bowie' },
      { Id: 15,Breed:"Cat", Name: 'Mercury' },
      { Id: 16,Breed:"Cat", Name: 'Claude' },
      { Id: 17,Breed:"Dog", Name: 'Bobby' },
      { Id: 18,Breed:"Gecko", Name: 'Reggie' },
      { Id: 19,Breed:"Gecko", Name: 'Luna' },
      { Id: 20,Breed:"Gecko", Name: 'Lizard Face' }
    ];

问题是 Animal class 中没有属性来映射 Id

的值

Answer 2

The in-memory web api library currently assumes that every collection has a primary key called id.

来自 GitHub repo

所以这只是 Angular in-memory-web-api 的固定要求，将键命名为 id 而不是 Id、foo，或其他。你试图达到的目标是不可能的（还）。

旁注： 对象属性区分大小写，因此 id 不是 Id。

Angular英雄之旅和内存数据服务

Angular Tour of Heroes and In Memory Data Service

angular

angular-in-memory-web-api