Блог

В документации по быстрому запуску AngularFire показано, как настроить Angular для чтения из базы данных Firestore. В нем не показано, как настроить Создание, обновление или удаление.

Я сделал очень простое приложение для CRUD:

с очень простой базой данных Firestore:

Вот HTML-шаблон:

 <form action="" method="get">
  <p>My favorite programmers:</p>

  <ul>
    <li class="text" *ngFor="let programmer of programmers | async">
      {{programmer.name}}
      <div>
        <label for="name">Update programmer: </label>
        <input type="text" class="form-control" name="name" id="name" required [(ngModel="programmer.name")]>
      </div>
      <button (click)="onUpdate(name)">Update programmer</button>
      <br>
      <button (click)="onDelete(name)">Delete programmer</button>
    </li>
  </ul>

  <label for="name">Add your favorite programmer: </label>
  <input type="text" class="form-control" name="name" id="name" required [(ngModel="programmer.name")]>
  <button (click)="onCreate(name)">Add programmer</button>
</form>
 

Вот такой класс:

 export class Programmer {

  constructor(
    public name: string,
  ) {  }

}
 

Here’s the Typescript component:

 import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';
import { FormsModule } from '@angular/forms';
import { Programmer } from '../programmer';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  programmers: Observable<any[]>;
  name: string | undefined;

  constructor(firestore: AngularFirestore) {
    this.programmers = firestore.collection('programmers').valueChanges();
  };

  onCreate(name: string): void {
    what.goes.here?
  };

  // read doesn't need a function

  onUpdate(name: string): void {
    what.goes.here?
  };

  onDelete(name: string): void {
    what.goes.here?
  };
}
 

What am I missing?