Question

当我想添加新英雄时，我将使用

来自heroes / heroes.component.ts的添加（字符串）函数

  add(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.heroService.addHero({ name } as Hero)
      .subscribe(hero => {
        this.heroes.push(hero);
      });
  }

和

来自heroes.service.ts的

addHero（Hero）函数


  addHero (hero: Hero): Observable<Hero> {
    return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
      tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
      catchError(this.handleError<Hero>('addHero'))
    );
  }

我想知道新ID的来源。

这是实时示例：https://stackblitz.com/angular/ombxjmbjedp

Answer 1

in-memory-web-api模块中的Angular用于通过RESTy API模拟CRUD操作。

此模块将自定义HttpInterceptor添加到拦截器链。在后台，拦截器还负责为实体生成ID。

// Create entity
// Can update an existing entity too if post409 is false.
protected post({ collection, collectionName, headers, id, req, resourceUrl, url }: RequestInfo)
   : ResponseOptions {
  const item = this.clone(this.getJsonBody(req));

  // tslint:disable-next-line:triple-equals
  if (item.id == undefined) {
    try {
      item.id = id || this.genId(collection, collectionName);

您还可以在InMemoryDataService中编写自己的函数以生成ID。就是我们在该示例中can see：

export class InMemoryDataService implements InMemoryDbService {
 ...

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

Answer 2


    addHero (hero: Hero): Observable<Hero> {
        return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
          tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
          catchError(this.handleError<Hero>('addHero'))
        );
      }

在此您可以看到，在调用此服务函数时，我们正在从heroes.component.ts发送数据对象，英雄：英雄，目前我们使用英雄作为已定义变量

addHero (hero: Hero): Observable<Hero> {
 // which is further allocated another instance 
 tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`));

所有数据都在newHero中，我们可以从中获取ID。谢谢

本教程有关addHero的问题（新ID来自何处）

2 个答案: