Leo 程式筆記

還記得我們在第一篇當中有建立一個 Service嗎?

當時為了測試環境的建置，我們在 TodoService 當中撰寫了一個 GetTodoList的 Function

目的是為了要取得data底下所有的物件資料。

接下來，查詢有了，我們再為TodoService增添新增、修改、刪除的功能。

先來看一下新增該怎麼寫：

// 跟第一篇的範例一樣，前面有說過，在Firebase的世界當中，將資料轉換為List
// 讓我們只需要專心將資料關注在List做異動即可
todoList: AngularFireList<any>;

AddTask(title: String, content: String, deadline: Date) {
    // 在TodoList當中，先進行判斷，若content沒有輸入則給予預設值空值
    content = (content === undefined) ? '' : content;
    // 由於現在資料都在todoList當中，因此如果要新增資料我們只需要呼叫 push() 就可以將一整個物件進行新增。
    this.todoList.push({
      Todo_Title: title,  // 標題
      Todo_Content: content, // 內文
      Todo_DeadLine: deadline, // 截止日
      Todo_isCheck: false,  // 是否完成
      Todo_isImport: false  // 是否被標記為重要代辦事項
    });
  }

看完新增的程式碼後，有沒有發現新增非常的簡單？

在前面一開始我們有用  this.firebaseDB.list('data');

將資料塞入todoList當中，這時候可以把 todoList想成就是你的DB。

我們只需要異動 todoList的資料，就可以同步到 Firebase上，這就是 Firebase迷人的地方。

接下來我們來看修改的部分：

// 所以在Update也是一樣，針對todoList下update就可以更新資料
// 這裡有一點需要注意的地方是，我們需要傳入key值，針對某一筆資料進行Update
UpdateTask($key: FirebaseOperation, DeadLine: Date, comment: String) {
    this.todoList.update($key, {
      Todo_DeadLine: DeadLine,
      Todo_Content: comment
    });
  }

修改看完，最後來看一下刪除的部分：

// 因為只是想刪除某一筆，所以直接傳入key值索引做刪除就可以了
RemoveTitle($key: FirebaseOperation) {
    this.todoList.remove($key);
}

基本上 Service寫到這邊就差不多了，只要掌握到一個重點

就是所有的資料都透過 List 來做存取、異動。

只要將List做 subscribe 就可以做到資料的同步了。

最後附上完整的 Service程式碼：

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { FirebaseOperation } from 'angularfire2/database/interfaces';
@Injectable({
  providedIn: 'root'
})
export class TodoService {
  todoList: AngularFireList<any>;
  constructor(private firebaseDB: AngularFireDatabase) { }

  // 讀取 DB底下所有 data的物件
  GetTodoList() {
    this.todoList = this.firebaseDB.list('data');
    return this.todoList;
  }

  // 新增 todolist
  AddTask(title: String, content: String, deadline: Date) {
    content = (content === undefined) ? '' : content;
    this.todoList.push({
      Todo_Title: title,
      Todo_Content: content,
      Todo_DeadLine: deadline,
      Todo_isCheck: false,
      Todo_isImport: false
    });
  }

  // 標示已完成
  CheckTitle($key: FirebaseOperation, isCheck: boolean) {

    this.todoList.update($key, { Todo_isCheck: !isCheck });

  }
  // 標示為重要代辦事項
  UpdateImportant($key: FirebaseOperation, isImportant: boolean) {
    console.log(isImportant);
    this.todoList.update($key, { Todo_isImport: isImportant });

  }
  // 修改 todolist
  UpdateTask($key: FirebaseOperation, DeadLine: Date, comment: String) {
    this.todoList.update($key, {
      Todo_DeadLine: DeadLine,
      Todo_Content: comment
    });
  }
  // 刪除代辦事項
  RemoveTitle($key: FirebaseOperation) {
    this.todoList.remove($key);
  }
}

接下來下一篇就可以來介紹如何把Service的資料 Binding到畫面上了。

以上文章敘述如有錯誤及觀念不正確，請不吝嗇指教:)

有任何家教、案子 或技術相關問題 請都歡迎聯繫我

http://www.zhenghui.idv.tw/