英雄的角度巡回赛与内存数据服务

Question

目前，我正在学习Angular.io英雄教程，在进行过程中做了一些非常小的更改，所以我不会100%地复制教程。

我已经到了http上的第六节，更具体地说，我正在使用内存中的Web服务通过id获取一个值。

得到英雄的身份

大多数web支持api/英雄/: id (例如api/英雄/11)形式的get by id请求。添加一个HeroService.getHero()方法来发出该请求：

我在实现这个部分时遇到了一个问题，因为我对代码做了一些微小的更改。我的数据对象与示例不同，它们被命名为动物，具有额外的属性，这些属性被资本化。

教程代码

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方法与它一起工作。这是否可能与内存中的Web有关，如果是的话，会有人帮助我吗？

Answer 1

内存中的web库目前假定每个集合都有一个名为id的主键。

来自https://github.com/angular/in-memory-web-api#import-the-in-memory-web-api-module

因此，这只是一个固定的要求，从角度内存-网络api命名的关键id，而不是Id，foo，或其他什么。你想要取得的成就是不可能的(现在)。

附带注意:对象属性区分大小写，因此id不是Id。

Answer 2

您必须将property类的属性从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' }
    ];

问题是动物类中没有属性来映射Id的值。