Problema ao inserir o comentário

Olá a todos,

Minha aplicação não está inserindo os comentários.

Depois de alguns testes eu consegui concluir que ela está entrando no método de incluir do serviço, porém não realiza a requisição POST,

Eu consegui em um dos testes inserir o comentário chamando o subscribe do observable manualmente, porém isso era para ser realizado pelo async pipe.

Esse é o código do meu template:

<div *ngIf="comentarios$ | async as comentarios">
    <ul class="list-unstyled">
        <li *ngFor="let comentario of comentarios">
            <p class="text-dark font-weight-bold mr-1">{{ comentario.userName }}</p>
            <em>{{ comentario.date | date: "dd-MM-yyyy HH:mm" }}</em>
            <p class="break-word mb-2">{{ comentario.text }}</p>
        </li>
    </ul>
    <div class="mt-4">
        <form [formGroup]="comentarioForm" (submit)="gravar()">
            <div class="input-group">
                <textarea class="form-control" formControlName="comentario"></textarea>
                <div class="input-group-append">
                    <button [disabled]="comentarioForm.invalid" class="btn btn-primary pull-left">Publicar</button>
                </div>
            </div>
            <app-mensagem
                mensagem="Tamanho máximo de 300 caracteres"
                *ngIf="!!comentarioForm.get('comentario')?.errors?.maxLength"></app-mensagem>
        </form>
    </div>
</div>

Meu componente:

import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { switchMap, tap } from 'rxjs/operators';
import { Comentarios } from './comentarios';
import { ComentariosService } from './comentarios.service';

@Component({
  selector: 'app-comentarios',
  templateUrl: './comentarios.component.html',
  styleUrls: ['./comentarios.component.css']
})
export class ComentariosComponent implements OnInit {

  @Input() id!: number;
  comentarios$!: Observable<Comentarios>;
  comentarioForm!: FormGroup;

  constructor(
    private comentariosService: ComentariosService,
    private formBuilder: FormBuilder
  ) { }

  ngOnInit(): void {
    this.comentarios$ = this.comentariosService.buscaComentario(this.id);

    this.comentarioForm = this.formBuilder.group({
      comentario: ['', Validators.maxLength(300)]
    });
  }

  gravar() {
    const comentario = this.comentarioForm.get('comentario')?.value ?? '';
    this.comentariosService.incluiComentario(this.id, comentario)
      .pipe(
        switchMap(() => this.comentariosService.buscaComentario(this.id)),
        tap(() => {
          this.comentarioForm.reset();
          alert('Comentário salvo!');
        })
      );
  }

}

Forma que funcionou chamando o subscribe manualmente:

import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { switchMap, tap } from 'rxjs/operators';
import { Comentarios } from './comentarios';
import { ComentariosService } from './comentarios.service';

@Component({
  selector: 'app-comentarios',
  templateUrl: './comentarios.component.html',
  styleUrls: ['./comentarios.component.css']
})
export class ComentariosComponent implements OnInit {

  @Input() id!: number;
  comentarios$!: Observable<Comentarios>;
  comentarioForm!: FormGroup;

  constructor(
    private comentariosService: ComentariosService,
    private formBuilder: FormBuilder
  ) { }

  ngOnInit(): void {
    this.comentarios$ = this.comentariosService.buscaComentario(this.id);

    this.comentarioForm = this.formBuilder.group({
      comentario: ['', Validators.maxLength(300)]
    });
  }

  gravar() {
    const comentario = this.comentarioForm.get('comentario')?.value ?? '';
    this.comentariosService.incluiComentario(this.id, comentario)
      .subscribe();
  }

}

Obrigado desde já!