Angular 8 Quick - CRUD 操作

简介

Angular 8 是一款流行的开源 JavaScript 框架，可以用于开发单页 Web 应用程序。其中包括许多功能强大的组件，其中之一就是 CRUD 操作。在本文中，我们将讨论如何在 Angular 8 中实现 CRUD 操作。

环境搭建

在开始之前，您需要先安装 Node.js 和 Angular CLI。您可以按照官方文档进行安装。

安装完成后，您可以运行以下命令来检查您是否已正确安装 Angular CLI。

ng version

创建一个新组件

在 Angular 中，组件用于渲染视图。我们需要创建一个用于显示我们的数据的组件。

您可以使用以下命令来生成一个新组件：

ng generate component product

这将在 src/app 目录下创建 product 组件。在这个组件中，我们将使用 HTML 和 CSS 来显示我们的数据。您可以按照自己的需求来自定义组件。

创建服务

在 Angular 中，服务用于处理数据。我们需要创建一个服务来处理我们的数据。您可以使用以下命令来生成一个新服务：

ng generate service product

这将在 src/app 目录下创建 product 服务。

接下来，我们需要在 product 服务中添加一些方法以处理我们的数据。以下是一些示例方法：

import { Injectable } from '@angular/core';
import { Product } from './product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  products: Product[] = [
    { id: 1, name: 'Product 1', price: 100 },
    { id: 2, name: 'Product 2', price: 200 },
    { id: 3, name: 'Product 3', price: 300 }
  ];

  constructor() { }

  getProducts(): Product[] {
    return this.products;
  }

  getProduct(id: number): Product {
    return this.products.find(product => product.id === id);
  }

  addProduct(product: Product) {
    product.id = this.products.length + 1;
    this.products.push(product);
  }

  updateProduct(product: Product) {
    const index = this.products.findIndex(item => item.id === product.id);
    this.products[index] = product;
  }

  deleteProduct(id: number) {
    const index = this.products.findIndex(item => item.id === id);
    this.products.splice(index, 1);
  }

}

在这里，我们通过一个名为 products 的数组来存储我们的数据。我们还定义了一些 CRUD 操作的方法来操作数据。例如 getProducts() 方法用于获取所有产品，getProduct(id: number) 方法用于根据 ID 获取特定产品。

在组件中使用服务

我们已经创建了组件和服务，现在我们需要在组件中使用服务来渲染我们的视图。以下是一个示例 product 组件：

import { Component, OnInit } from '@angular/core';
import { Product } from '../product';
import { ProductService } from '../product.service';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  products: Product[] = [];

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.getProducts();
  }

  getProducts() {
    this.products = this.productService.getProducts();
  }

}

在这里，我们注入了 product 服务，并使用 getProducts() 方法获取数据。在模板中，我们使用 *ngFor 指令来循环遍历 products 数组并显示数据。

实现 CRUD 操作

现在，我们已经能够渲染我们的数据，我们需要实现 CRUD 操作。下面是一些示例方法：

import { Component, OnInit } from '@angular/core';
import { Product } from '../product';
import { ProductService } from '../product.service';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  products: Product[] = [];

  selectedProduct?: Product;
  newProduct?: Product;

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.getProducts();
  }

  getProducts() {
    this.products = this.productService.getProducts();
  }

  onSelect(product: Product) {
    this.selectedProduct = product;
    this.newProduct = undefined;
  }

  addProduct() {
    this.newProduct = { id: 0, name: '', price: 0 };
    this.selectedProduct = undefined;
  }

  saveProduct(product: Product) {
    if (product.id === 0) {
      this.productService.addProduct(product);
    } else {
      this.productService.updateProduct(product);
    }
    this.newProduct = undefined;
    this.selectedProduct = undefined;
  }

  deleteProduct(id: number) {
    if (confirm('Are you sure to delete?')) {
      this.productService.deleteProduct(id);
      this.selectedProduct = undefined;
    }
  }

}

在这里，我们添加了一些用于执行 CRUD 操作的方法。例如，onSelect(product: Product) 方法用于选定一个产品进行编辑。addProduct() 方法用于添加新产品。saveProduct(product: Product) 方法用于保存更改。deleteProduct(id: number) 方法用于删除产品。

总结

在本文中，我们介绍了如何在 Angular 8 中实现 CRUD 操作。我们创建了一个组件来显示数据，创建了一个服务来处理数据，然后在组件中使用服务来实现 CRUD 操作。通过这些简单的步骤，您可以轻松地创建和管理你的数据。