Não está exibindo os comentários na tela

Quando salvo os comentários, a API está recebendo os parametros e está gravando.

Porem, não consegue exibir na tela.

Template: comentarios.component.html

<div *ngIf="comentarios$ | async as comentarios">
    <ul class="list-unstyled comentario-list">
        <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 class="btn btn-primary pull-left" [disabled]="ComentarioForm.invalid">Publicar</button>
                </div>
            </div>
            <app-mensagem
            mensagem="Tamanho máximo de 300 caracteres"
            *ngIf="!!ComentarioForm.get('comentario')?.errors?.maxLength"></app-mensagem>
        </form>
    </div>
</div>

Componente: comentarios.component.ts

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 comentarioService: ComentariosService, private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.comentarios$ = this.comentarioService.BuscaComentario(this.id);
    this.ComentarioForm = this.formBuilder.group({
      comentario: ['', Validators.maxLength(300)]
    });
  }

  Gravar(): void{
    const comentario = this.ComentarioForm.get('comentario')?.value ?? '';
    this.comentarios$ = this.comentarioService.IncluirComentario(this.id, comentario)
      .pipe(
        switchMap(() => this.comentarioService.BuscaComentario(this.id)),
        tap(() => {
          this.ComentarioForm.reset();
          alert('Comentário Salvo');
        })
      );
  }
}