1

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

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

通过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 有关吗，如果可以，有人可以帮助我吗？

4

2 回答 2

2

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

来自GitHub 存储库

因此，Angular in-memory-web-api 的固定要求是命名键id而不是Id,foo或其他名称。你试图达到的目标是不可能的（还）。

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

于 2018-08-17T21:37:34.963 回答
0

您必须将 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 的值

于 2018-08-17T20:18:42.850 回答