Учебное пособие по Angular Firebase: обновление данных в коллекции базы данных NoSql

Firebase Cloud Firestore, который в настоящее время находится на стадии бета-тестирования, представляет собой «следующее поколение базы данных в реальном времени с более мощными запросами и автоматическим масштабированием». Он был приобретен Google в 2014 году и представляет собой облачное решение для базы данных NoSql в реальном времени.

Теперь, когда я показал вам, как читать и записывать данные в Firebase's Firestore, после этой статьи вы сможете обновлять данные.

Шаг 1: настройте среду.

Чтобы настроить среду Firebase, см. Мою предыдущую статью.

Шаг 2. Добавьте данные в базу данных.

Добавьте коллекцию с именем items, присвойте ей идентификатор документа, равный 1, а затем укажите поле с именем name.

Шаг 3. Измените свой HTML, добавив новые поля и кнопки.

Нам понадобится текстовое поле, кнопка и переменная для асинхронной привязки данных.

app.component.html

<div style="text-align:center">
  Update this new item:
  {{ (item | async)?.name }}<br>
  <input #updateName><br>
  <button (click)="update(updateName.value)">Change User Name</button>
</div>

Шаг 4. Измените свой машинописный текст.

Нам нужно написать и обновить функцию, а также изменить конструктор, чтобы изначально получить коллекцию элементов. Кроме того, нам нужно будет использовать интерфейс для элемента.

export interface Item {
  name: string;
}

В конструкторе вставьте службы AngularFirestore, а затем выполните привязку к коллекции элементов.

constructor(public afAuth: AngularFireAuth, db: AngularFirestore) {
  this.afAuth.auth.signInAnonymously();
  this._db = db;
  this.itemDoc = this._db.doc<Item>('items/1');
  this.item = this.itemDoc.valueChanges();
}

Теперь напишите свою функцию обновления.

update(sName: string) {
  let tmp: Item = { name: sName };
  this.itemDoc.update(tmp);
}

Наконец: запустите приложение.

Чтобы запустить в режиме разработки, откройте терминал и запустите:

ng serve — open

Чтобы построить для производства с AOT и treehaking:

ng build --prod --build-optimizer

Вот репозиторий git.