erro ao aparecer a mensagem

listar-pensamento.component.ts

import { Component, OnInit } from '@angular/core';
import { Pensamento } from '../pensamento';
import { PensamentoService } from '../pensamento.service';

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

  listaPensamentos: Pensamento[] = [];
  paginaAtual: number = 1;
  haMaisPensamentos: boolean = true;

  constructor(private pensamentoService: PensamentoService) { }

  ngOnInit(): void {
    this.pegarTodosPensamentos();
  }

  pegarTodosPensamentos() {
      this.pensamentoService.listarPensamentos(this.paginaAtual).subscribe((response) => {
         console.log(response);
         this.listaPensamentos = response;
      }, (error) => {
        console.error(error);
      });
  }

  carregarMaisPensamentos() {
    this.pensamentoService.listarPensamentos(++this.paginaAtual).subscribe((listaPensamentos) => {
      this.listaPensamentos.push(...listaPensamentos);
      if(!this.listaPensamentos.length) {
        this.haMaisPensamentos = false;
      }
    })
  }

}

botao-carregar-mais-comonent.html

<div class="center" *ngIf="haMaisPensamentos; else semMaisPensamentos">
  <button [disabled]="!haMaisPensamentos" class="botao carregar-mais">Carregar mais</button>
</div>
<ng-template #semMaisPensamentos  >
   <p class="mensagem-center ff-inter">Não há mais pensamentos para exibir</p>
</ng-template>

estou recebendo um erro ao mostrar a mensagem quando não há mais pensamentos para listar recebo a aba do console Pensamentos is not iterable