ayudame con la impresion en datatable- ajax y angular , tengo este inconveniente - @Component({
  selector: 'app-inventario-almacen',
  templateUrl: './inventario-almacen.component.html',
  styleUrl: './inventario-almacen.component.css',
})
export class InventarioAlmacenComponent
  implements AfterViewInit, OnInit, OnDestroy
{
  dtOptions: Config = {};
  dtTrigger = new Subject<ADTSettings>();
  detalleSeccion: Record<string, any>[] = [];
  almacenes: Almacen[] = [];
  idalmacen: number | null = null;
  iconClass: string = '';

  constructor(private almacenService: AlmacenService) {}

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

  ngAfterViewInit(): void {
    this.initDataTable();
  }

  configDataTable(): void {
    this.dtOptions = {
      language: {
        url: 'https://cdn.datatables.net/plug-ins/2.0.8/i18n/es-ES.json',
        paginate: {
          first: '<i class="bi bi-chevron-double-left"></i>',
          last: '<i class="bi bi-chevron-double-right"></i>',
          next: '<i class="bi bi-chevron-right"></i>',
          previous: '<i class="bi bi-chevron-left"></i>',
        },
      },

      responsive: true,
      columnDefs: [
        { responsivePriority: 1, targets: -1 },
        { responsivePriority: 2, targets: 1 },
      ],

      layout: {
        top2Start: 'buttons',
        topStart: 'pageLength',
        topEnd: 'search',
      },

      buttons: {
        dom: {
          button: {
            tag: 'button',
            className: 'btn',
          },
        },
        buttons: [
          {
            extend: 'excel',
            className: 'btn btn-outline-success',
            text: '<i class="bi bi-file-earmark-excel"></i>',
            titleAttr: 'Excel',
            messageTop: this.getDetalleSeccionMessage(),
          },
          {
            extend: 'pdf',
            className: 'btn btn-outline-danger',
            text: '<i class="bi bi-file-earmark-pdf"></i>',
            titleAttr: 'PDF',
          },
        ],
      },
    };
  }

  
  getDetalleSeccionMessage(): string {
      if (!this.detalleSeccion || this.detalleSeccion.length === 0) {
        console.log('detalleSeccion está vacío o no está definido');
        return 'No hay datos disponibles';
      } else {
        console.log('detalleSeccion tiene datos');
        return 'Si hay datos'
      }
  }
  
  
  
  

  initDataTable(): void {
    const that = this;
    this.dtOptions = {
      ...this.dtOptions,
      ajax: (dataTablesParameters: any, callback) => {
        this.listar(callback);
      },

      columns: [
        { title: 'ID', data: 'idproducto' },
        { title: 'Producto', data: 'nombre_producto' },
        { title: 'Categoria', data: 'nombre_categoria' },
        { title: 'Stock', data: 'stock' },
      ],
    };
  }


  listarAlmacenes(): void {
    this.almacenService.listarAlmacenes().subscribe({
      next: async (almacenes) => {
        this.almacenes = almacenes;
        this.idalmacen = this.almacenes[0].idalmacen;
        await this.obtenerDetallesSeccion(this.idalmacen);
        this.configDataTable();
        setTimeout(() => {
          this.dtTrigger.next(this.dtOptions);
        }, 200);
      },
      error: (error) => {
        console.error('Error al obtener almacenes', error);
      },
    });
  }

  obtenerDetallesSeccion(idalmacen: number): Promise<any> {
    return new Promise((resolve, reject) => {
      this.almacenService.obtenerDetalleSeccion(idalmacen).subscribe({
        next: (detalles: Record<string, any>[]) => {
          this.detalleSeccion = detalles;
          console.log('Sección de detalles cargada:', this.detalleSeccion);
          resolve(detalles);
        },
        error: (error) => {
          console.error('Error al obtener detalles de la sección', error);
          reject(error);
        },
      });
    });
  }




  alertClass(cantProd: number, capdAlmc: number): string {
    const espacio = cantProd / capdAlmc;
    if (espacio < 0.6) {
      this.iconClass = 'bi-check-circle-fill';
      return 'alert-success';
    } else if (espacio < 0.85) {
      this.iconClass = 'bi-exclamation-triangle-fill';
      return 'alert-warning';
    } else {
      this.iconClass = 'bi-exclamation-octagon-fill';
      return 'alert-danger';
    }
  }

  listar(callback: any): void {
    this.almacenService.listarProductosPorAlmacen(this.idalmacen!).subscribe({
      next: (almacenes: Record<string, any>[]) => {
        callback({
          data: almacenes,
        });
      },
      error: (error) => {
        console.error('Error a listar almacén', error);
      },
    });
  }

  filtrarProductosPorAlmacen(id: number): void {
    this.idalmacen = id;
    this.obtenerDetallesSeccion(this.idalmacen);
    this.refreshTable();
    
  }

  refreshTable() {
    const tabla = ('#tablaInventarioAlmacen').DataTable();
    if (tabla) {
      tabla.ajax.reload();
    }
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}
 - no se esta listando desde bd, quiero que el boton obtenga los valores de detalles, essi hay datos quiero que muestre un mensaje en impresion, eso funciona, pero ahora el problema es que no se esta listando, como lo soluciono?