Почему мой вид не обновляется, когда я добавляю что-то в свою базу данных?

Question

Я просто хочу начать с того, что я нахожусь в процессе изучения angular и только начинаю набирать asp все различные концепции.

Хорошо, мой проект работает точка я могу редактировать и удалять контакты из моей базы данных Firebase, и мой взгляд будет обновляться. Но когда я добавляю новый контакт, он не обновляется.

Способ его настройки примерно такой:

Служба контактов

getContacts() {
  this.http.get<any[]>(firebaseURL + 'contacts.json')
    .pipe(
      map(response => {
        const temp: any[] = [];
        for (const identifier in response){
          temp[identifier] = response[identifier];
        }
        return temp;
      })
    ).subscribe(contacts => this.contactSource.next(contacts));
}

addContact(contact: Contact) {
  return this.http.post<Contact>(firebaseURL + 'contacts.json', contact);
}

contactEdit(identifier: string, contact: any) {
  return this.http.patch<Contact>(firebaseURL + 'contacts/' + `${identifier}.json`, contact);
}

deleteContact(identifier: string) {
  return this.http.delete<Contact>(firebaseURL + 'contacts/' + `${identifier}.json`);
}

getContacts() вызывается, когда вы хотите обновить массив контактов из базы данных

Компонент приложения (TypeScript)

ngOnInit(): void {
  //this.fetchContacts();
  this.contactService.contactGet$.subscribe(contacts => {
    this.contacts = contacts;
  });
  this.contactService.getContacts();

  this.contactService.contactEdit$.subscribe(contact => {
    this.selectedContact = contact;
  });

  this.contactService.fetchNew$.subscribe(bool => {
    //this.fetchContacts();
  });
}

Компонент приложения (HTML)

<h1>Contact Manager</h1>
<button class="blue" (click)="openCreator()">Add Contact</button>
<app-contact-list *ngIf = "contacts" [contacts] = "contacts"></app-contact-list>
<app-contact-editor *ngIf="selectedContact != null" [identifier] = "selectedContact" [contact] = "contacts[selectedContact]" (closeEditor) = "closeEditor($event)"></app-contact-editor>
<app-contact-creator *ngIf="createContact" (closeCreator) = "closeCreator($event)"></app-contact-creator>

Редактор контактов (TypeScript) - РАБОТА (Обновления после)

saveChanges() {
  let temp: any = {};
  if (this.firstName != null && this.firstName.length > 0){
    temp.firstName = this.firstName;
  }
  if (this.lastName != null && this.lastName.length > 0){
    temp.lastName = this.lastName;
  }
  if (this.phone != null  && (this.phone + '').length === 10){
    temp.phone = this.phone;
  }
  if (this.email != null && this.email.length > 0){
    temp.email = this.email;
  }
  if (temp != null){
    this.contactService.contactEdit(this.identifier, temp)
      .subscribe(() => {
        this.contactService.getContacts();
        this.close();
      });
  }
}

Контакт Создатель (TypeScript) - НЕ РАБОТАЕТ (не обновляет Вид после)

create() {
  let temp: Contact = { firstName: this.firstName, lastName: this.lastName, phone: this.phone, email: this.email };
  this.contactService.addContact(temp)
    .subscribe(() => {
      this.contactService.getContacts();
      this.close();
    });
}