Question

我目前正在完成Angular.io英雄巡回教程，随着我的进行做了一些非常小的改动，所以我不是100％复制该教程。

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

大多数Web API支持api / hero /：id形式的get by id请求（例如api / hero / 11）。添加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方法可以使用它。如果可以的话，这与In Memory Web Api有关吗？

Answer 1

内存网络api库当前假定每个集合都有一个名为id的主键。

来自GitHub repo的

因此，命名为id而不是Id，foo或其他名称只是Angular in-memory-web-api的固定要求。您尝试达到的目标还不可能（到目前为止）。

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

Answer 2

您必须将Animal类的属性从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类中没有属性来映射Id的值

英雄和记忆数据服务的角度之旅

2 个答案: