Question

我目前正在开发Angular 2入门教程。我在last chapter called "HTTP"。我刚学会了如何将数据集添加到集合列表中。它基本上展示了如何将东西“POST”到后端API中。

我创建了一个模拟服务来模拟真正的HTTP后端：

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

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    let 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 };
  }
}

还有一项服务可以摆弄这些数据：

import {Injectable} from "@angular/core";
import {Http, Headers} from "@angular/http";
import "rxjs/add/operator/toPromise";
import {Hero} from "./hero";

@Injectable()
export class HeroService {

  private heroesUrl = 'api/heroes';  // URL to web api
  private headers = new Headers({'Content-Type': 'application/json'});

  constructor(private http: Http) {

  }

  update(hero: Hero): Promise<Hero> {
    const url = `${this.heroesUrl}/${hero.id}`;
    return this.http.put(url, JSON.stringify(hero), {headers: this.headers}).toPromise().then(() => hero).catch(this.handleError);
  }

  getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
      .toPromise().then(response => response.json().data as Hero[]).catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }

  getHero(id: number): Promise<Hero> {
    const url = `${this.heroesUrl}/${id}`;
    return this.http.get(url)
      .toPromise()
      .then(response => response.json().data as Hero)
      .catch(this.handleError);
  }

  create(name: string): Promise<Hero> {
    return this.http.post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers}).toPromise().then(res => res.json().data).catch(this.handleError);
  }
}

UI按钮的单击侦听器调用的add方法如下所示：

  add(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.heroService.create(name).then(hero => { this.heroes.push(hero); this.selectedHero = null;});
  }

您可以轻松使用此应用here的类似状态。

您在输入框中添加内容并单击“保存”。点击监听器调用“add（）”并添加服务的“create（）”，最后调用Web服务。新创建的数据集将添加到列表中，实际上是模拟数据的一部分。它以给定的名称（源自输入的网络组件）和适当的号码（如果最后一个英雄是20，你得到21）存储为“id”。

这段代码让我感到非常困惑。我无法理解它有效的事实。为什么这个模拟API现在该做什么只是因为它得到一个名字？我的意思是你发布的东西给API提供一个名字。精细。但是，它是如何知道还有另一个属性“id”需要自动递增？

只是为了表明它与其他样板文件隔离，这是我正在谈论的代码片段：

http.post('api/heroes', JSON.stringify({name: name}), new Headers({Content-Type: 'application/json'});

Answer 1

魔法来自app.module使用

InMemoryWebApiModule.forRoot(InMemoryDataService, {delay: 200})

如果你钻进模块，它会返回一个XHRBackend，它接受你正在进行的xhr请求并将它们传递给内存db。

export declare function inMemoryBackendServiceFactory(injector: Injector, dbService: InMemoryDbService, options: InMemoryBackendConfig): XHRBackend;

Angular 2入门教程神奇地生成数据

1 个答案: