Angular 2 - 使用HTTP进行CRUD操作

在Angular 2中，我们可以通过HttpClientModule来使用HTTP服务进行CRUD操作。在本篇文章中，我们将介绍如何使用Angular 2的HTTP服务进行CRUD操作。

准备

在开始之前，需要确保已经安装了最新版本的Angular CLI和Node.js。接下来，我们创建一个名为angular-http的新项目。

ng new angular-http

进入项目目录：

cd angular-http

我们将在这个项目中创建一个新组件，用于演示CRUD操作。

ng g c components/crud

基本的CRUD操作

接下来我们将演示如何使用HTTP服务来进行基本的CRUD操作。

首先，我们需要导入HttpClientModule和HttpClient：

import { HttpClientModule, HttpClient } from '@angular/common/http';

然后我们将其添加到模块的imports数组中：

@NgModule({
  declarations: [
    AppComponent,
    CrudComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接下来我们将使用一个REST API服务：https://reqres.in/。这个服务提供了一个简单的API，用于模拟数据的创建、获取、更新和删除操作。

在CrudComponent组件中，我们添加一个方法getUsers，用于从API中获取一组用户数据：

export class CrudComponent implements OnInit {

  users: any[];

  constructor(private httpClient: HttpClient) { }

  ngOnInit() {
    this.getUsers();
  }

  getUsers() {
    this.httpClient.get('https://reqres.in/api/users').subscribe((response: any) => {
      this.users = response.data;
    });
  }
}

get方法用于获取数据。第一个参数是API的地址，第二个参数是用于处理响应的函数。在这个例子中，我们使用了一个Lambda表达式。响应中的数据储存在response.data中。

现在，我们在组件的template中展示用户的列表：

<ul>
  <li *ngFor="let user of users">
    {{ user.first_name }} {{ user.last_name }}
  </li>
</ul>

添加新用户

接下来我们将介绍如何向API添加新的用户数据。

首先，我们创建一个表单，用于添加数据。在template中添加以下内容：

<form (submit)="addUser()">
  <input type="text" placeholder="First Name" [(ngModel)]="firstName">
  <input type="text" placeholder="Last Name" [(ngModel)]="lastName">
  <button type="submit">Add User</button>
</form>

在组件中，我们需要添加一些新方法和属性：

export class CrudComponent implements OnInit {

  ...

  firstName: string;
  lastName: string;

  ...

  addUser() {
    const user = {
      first_name: this.firstName,
      last_name: this.lastName,
    };
    this.httpClient.post('https://reqres.in/api/users', user).subscribe((response: any) => {
      this.users.push(response);
    });
  }
}

我们使用了post方法向API发送数据。第一个参数是API的地址，第二个参数是用于发送的数据。在这个例子中，我们使用了一个Javascript对象。在响应中，我们将新用户添加到现有用户的列表中。

更新用户数据

接下来我们将介绍如何更新API中的用户数据。

我们添加一个修改按钮，在用户数据旁边：

<ul>
  <li *ngFor="let user of users">
    {{ user.first_name }} {{ user.last_name }} <button type="button" (click)="editUser(user)">Edit</button>
  </li>
</ul>

这里我们使用了一个新的事件绑定(click)。这个绑定允许我们在用户数据旁边添加一个修改按钮。

在组件中，我们添加一些新方法和属性：

export class CrudComponent implements OnInit {

  ...

  isEditing: boolean = false;
  editedUserId: number;
  editedUser: any;

  ...

  editUser(user: any): void {
    this.isEditing = true;
    this.editedUserId = user.id;
    this.editedUser = user;
  }

  onSubmit(form: NgForm) {
    const updatedUser = {
      first_name: form.value.firstName,
      last_name: form.value.lastName,
    };
    this.httpClient.put(`https://reqres.in/api/users/${this.editedUserId}`, updatedUser).subscribe((response: any) => {
      this.isEditing = false;
      this.users[this.users.findIndex(user => user.id === this.editedUserId)] = response;
      this.editedUserId = null;
      this.editedUser = null;
    });
  }
}

在editUser方法中，我们存储了当前要修改的用户数据。在onSubmit方法中，我们使用了put方法来更新API中的数据。注意我们使用了一个ES6字符串插值表达式${this.editedUserId}，用于生成API的地址。在响应中，我们更新了修改后的数据。

最后，我们添加一个新的表单，在用户数据旁边，用于操作数据。

<div *ngIf="isEditing">
  <form (submit)="onSubmit(editForm)">
    <input type="text" placeholder="First Name" [(ngModel)]="editedUser.first_name" name="firstName" #firstName="ngModel">
    <input type="text" placeholder="Last Name" [(ngModel)]="editedUser.last_name" name="lastName" #lastName="ngModel">
    <button type="submit" [disabled]="!editForm.valid">Save Changes</button>
  </form>
</div>

删除用户数据

最后我们将介绍如何删除API中的用户数据。我们添加一个删除按钮。

<ul>
  <li *ngFor="let user of users">
    {{ user.first_name }} {{ user.last_name }}
    <button type="button" (click)="deleteUser(user)">Delete</button>
    <button type="button" (click)="editUser(user)">Edit</button>
  </li>
</ul>

在组件中，我们添加一下新方法：

export class CrudComponent implements OnInit {

  ...

  deleteUser(user: any): void {
    this.httpClient.delete(`https://reqres.in/api/users/${user.id}`).subscribe(() => {
      this.users.splice(this.users.indexOf(user), 1);
    });
  }
}

在这个deleteUser方法中，我们使用了delete方法，删除API中的数据。在响应中，我们从现有的用户列表中删除了相应的用户数据。

总结

在本篇文章中，我们演示了如何使用Angular 2的HTTP服务进行基本的CRUD操作。我们使用了一个REST API服务，用于模拟数据的创建、获取、更新和删除操作。我们创建了一个新的组件，用于展示用户列表和添加、修改、删除数据的表单。在未来的文章中，我们将介绍如何使用更高级的技术来处理HTTP服务。