Angular 8 - Как я могу обновить базу данных Firebase

Question

Я пытаюсь обновить список транспортных средств, но я не знаю, как его обновить, поскольку я следую учебному пособию по Udemy, посвященному Mosh, которое является устаревшей версией Angular.

Сервисный код (TS):

import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { Injectable } from '@angular/core';
import { Cars } from './component/vehicle-table/vehicle.services';

@Injectable({
  providedIn: 'root'
})

export class CarIdService {

  private dbPath = '/car';

  CarID: AngularFireList<Cars> = null;

  constructor(private db: AngularFireDatabase) {
    this.CarID = db.list(this.dbPath);
  }

  //Create
  create(carID) {
    this.db.list(this.dbPath).push(carID);
  }

  //Read
  getCarIdList(): AngularFireList<Cars>{
    return this.CarID;
  }

  //Update
  updateCarID(key: string, modelNum: any, 
    modelName: string, 
    regName: number,
    driverName: string, modelColor: string,
    carBrand: string ): Promise<void> {
    return this.CarID.update(key, modelNum);
  }
}

HTML:

<!--Form Add Vehicle-->
<form #f="ngForm" (ngSubmit)="save(f.value)">
    <div class="row">
        <div class="VehicleForm">

            <div class="form-group">
                <!--Model Number-->
                <label for="modelNum"> Model Number</label>
                <input required #modelNum="ngModel" ngModel name="modelNum" id="modelNum" type="number"
                    class="form-control">
            </div>
            <!--Error when blank-->
            <div class="alert alert-danger" *ngIf="modelNum.touched && modelNum.invalid">Model Number is required
            </div>

            <!--Model Name-->
            <div class="form-group">
                <label for="modelName"> Model Name</label>
                <input required #modelName="ngModel" ngModel name="modelName" id="modelName" type="text"
                    class="form-control">
            </div>
            <div class="alert alert-danger" *ngIf="modelName.touched && modelName.invalid">Model ame is required
            </div>

            <!--Reg Name-->
            <div class="form-group">
                <label for="regNum"> Registration Number</label>
                <input required #regNum="ngModel" ngModel name="regName" id="regNum" type="number"
                    class="form-control">
            </div>
            <div class="alert alert-danger" *ngIf="regNum.touched && regNum.invalid">Registration Number is required
            </div>

            <button class="btn btn-primary" [disabled]="!f.valid">Add to List</button>
        </div>

        <div class="VehicleForm2">
            <div class="form-group">
                <label for="driverName"> Driver Name</label>
                <input required #driverName="ngModel" ngModel name="driverName" id="driverName" type="text" class="form-control">
            </div>
            <div class="alert alert-danger" *ngIf="driverName.touched && driverName.invalid">Driver name is required </div>

            <div class="form-group">
                <label for="modelColor"> Color</label>
                <input required #modelColor="ngModel" ngModel name="modelColor" id="modelColor" type="text" class="form-control">
            </div>
            <div class="alert alert-danger" *ngIf="modelColor.touched && modelColor.invalid">Vehicle Color is required </div>

            <div class="form-group">
                <label for="carBrand"> Vehicle Brand</label>
                <input required #carBrand="ngModel" ngModel name="carBrand" id="carBrand" type="text" class="form-control">
            </div>
            <div class="alert alert-danger" *ngIf="carBrand.touched && carBrand.invalid">Vehicle Brand is required </div>

        </div>
    </div>
</form>

Компонент TS:

import { CarIdService } from './../../car-id.service';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-vehicle-list',
  templateUrl: './vehicle-list.component.html',
  styleUrls: ['./vehicle-list.component.css']
})
export class VehicleListComponent {

  constructor(private CarIdService: CarIdService){}
 
  save(carID){
    this.CarIdService.create(carID);
  }

}

Я уже получил C. Создать и R. Прочитать, но я не могу выполнить U. Обновление и D. Удалить.Я уже пробовал некоторые другие функции, но, похоже, это не вписывается в мой код.Может ли кто-нибудь помочь мне, как обновить мою базу данных Firebase с помощью веб-приложения, в котором я создавал?

Какие коды я буду использовать для выполнения обновления базы данных, например, когда я нажимаю «изменить», кроме строки.

Answer 1

Вы должны работать с db: AngularFireDatabase, как вы это сделали в create(carID).Там вы сделали push, для обновления вам нужно добавить update вызов в список:

  updateCarID(key: string, modelNum: any, 
    modelName: string, 
    regName: number,
    driverName: string, modelColor: string,
    carBrand: string ): Promise<void> {
    return this.db.list(this.dbPath).update(key, value);
  }

API для AngularFireList можно найти здесь .

Из API:

Добавление новых элементов:

const itemsRef = db.list('items');
itemsRef.push({ name: newName });

Замена элементов в списке с помощью set:

const itemsRef = db.list('items');
// to get a key, check the Example app below
itemsRef.set('key-of-some-data', { size: newSize });

Обновление элементов в списке с помощью update

const itemsRef = db.list('items');
// to get a key, check the Example app below
itemsRef.update('key-of-some-data', { size: newSize });

Удаление элементов из списка:

const itemsRef = db.list('items');
// to get a key, check the Example app below
itemsRef.remove('key-of-some-data');

Удаление всего списка:

const itemsRef = db.list('items');
itemsRef.remove();

---

Полный пример Angular Firebase CRUD с использованием COLLECTIONS можно найти в этом учебнике .

Пример предназначен для пользователей.

Создание:

createUser(value, avatar){
  return this.db.collection('users').add({
    name: value.name,
    nameToSearch: value.name.toLowerCase(),
    surname: value.surname,
    age: parseInt(value.age),
    avatar: avatar
  });
}

Чтение:

getPeople(){
  return new Promise<any>((resolve, reject) => {
    this.afs.collection('/people').snapshotChanges()
    .subscribe(snapshots => {
      resolve(snapshots)
    })
  })
}

Обновление:

updateUser(userKey, value){
  value.nameToSearch = value.name.toLowerCase();
  return this.db.collection('users').doc(userKey).set(value);
}

Удалить:

deleteUser(userKey){
  return this.db.collection('users').doc(userKey).delete();
}