Các hoạt động CRUD Firebase cơ bản trong Angular với AngularFire2

In this quick post you'll see how to perform basic CRUD operations on a Firebase database instance in your Angular 2+ apps.

---

Ta đã đề cập đến xác thực Firebase và triển khai cho dịch vụ lưu trữ Firebase . Bây giờ ta hãy khám phá cách bắt đầu với database thời gian thực trong các ứng dụng Angular 2+ bằng cách sử dụng thư viện AngularFire2 . Firebase giúp bạn dễ dàng cài đặt và chạy rất nhanh với việc điền và thực hiện các thao tác trên database .

Ta sẽ sử dụng Todos trong bài đăng cho các ví dụ của ta . Mỗi việc cần làm có một giá trị chuỗi nội dung cho mô tả việc cần làm và một boolean đã hoàn thành để cho biết liệu việc cần làm đã hoàn thành hay chưa.

Cài đặt

Trước tiên, bạn cần nhập AngularFireDatabase và AngularFireList cũng như đưa cái trước vào hàm tạo của bạn:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { AngularFireDatabase, AngularFireList }
  from 'angularfire2/database';
@Component({ ... })
export class AppComponent implements OnInit {
  todos$: AngularFireList<any[]>;
  constructor(private af: AngularFireDatabase) {}
  ngOnInit() {
    // ...
  }
  addTodo(value: string): void {
    // ...
  }
  deleteTodo(todo: any): void {
    // ...
  }
  toggleDone(todo: any): void {
    // ...
  }

Bạn cũng cần đảm bảo AngularFireDatabase được cung cấp trong module ứng dụng của bạn:

// ...

import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { AngularFireDatabase } from 'angularfire2/database';

Đọc sách công việc

Chỉ cần khai báo thuộc tính lớp kiểu AngularFireList và lấy nút / todos từ database Firebase của bạn với AngularFireDatabase.list trong hook vòng đời OnInit :

todos$: AngularFireList;

ngOnInit() {
  this.todos$ = this.af.list('/todos');
}

Có thể quan sát được trả về sẽ chứa tất cả các việc cần làm dưới / việc cần làm trong database của bạn. Bạn cũng có thể chuyển vào một đối tượng làm đối số thứ hai để cung cấp các tùy chọn truy vấn hoặc lọc. Giả sử ta chỉ muốn 3 mục đầu tiên:

this.todos$ = this.af.list('/todos', ref => 
  ref.limitToFirst(3)
);

Bạn có thể mở hộp có thể quan sát để hiển thị các mục việc cần làm trong mẫu của bạn bằng cách sử dụng đường ống không đồng bộ như sau:

<ul>
  <li *ngFor="let todo of (todos$ | async)" [class.done]="todo.done">
    {{ todo.content }}
  </li>
</ul>

Tạo công việc

Thêm một mục việc cần làm mới thực sự dễ dàng, chỉ cần gọi push trên version AngularFireList của bạn:

addTodo(value: string): void {
  this.todos$.push({ content: value, done: false });
}

Cập nhật và xóa việc cần làm

Để cập nhật hoặc xóa việc cần làm, mọi thứ hơi khác một chút vì bạn cần tham chiếu đến mục việc cần làm sẽ được cập nhật hoặc xóa. Điều này có thể được thực hiện với AngularFireDatabase.object . Các đối tượng bên trong Firebase có một khóa duy nhất có sẵn dưới dạng $ key :

Cập nhật việc cần làm

Đây là cách bạn sẽ chuyển đổi trạng thái đã hoàn thành của một việc cần làm:

toggleDone(todo: any): void {
  this.af.object('/todos/' + todo.$key)
    .update({ content: todo.content, done: !todo.done });
}

Hoặc cập nhật nội dung của nó:

updateTodo2(todo: any, newValue: string): void {
  this.af.object('/todos/' + todo.$key)
    .update({ content: newValue, done: todo.done });    
}

Để thay thế cho phương pháp cập nhật trên đối tượng Firebase, bạn cũng có thể sử dụng set . Sử dụng phương thức set sẽ tạo ra một mục mới nếu một mục không tồn tại và thay thế cho toàn bộ đối tượng, vì vậy nó sẽ phá hủy.

Xóa công việc

Xóa một mục cũng dễ dàng như cập nhật nó:

deleteTodo(todo: any): void {
  this.af.object('/todos/' + todo.$key).remove();
}

Lưu ý cài đặt , cập nhật và loại bỏ trả lại một lời hứa cho bạn có thể chuỗi sau đó / bắt các cuộc gọi để cho phép bạn thực hiện một hoạt động thành công hoặc một lỗi.

---

---

Các tin liên quan