estoy usando datatable en angular y tengo este error DataTables warning: table id=DataTables_Table_0 - Cannot reinitialise DataTable. For more information about this error, please see https://datatables.net/tn/3 - no uses el simbolo del dolar porque eso hace quetengaserrores, mejor usaSDLOAR caundo quieras utilizar ese simbolo - este es mi componente, solo contesta con las modificaciones no con todo - import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { Config } from 'datatables.net';
import 'datatables.net-responsive';
import Swal from 'sweetalert2';
import { Usuario } from '../../models/usuario.model';
import { UsuarioService } from '../services/usuario.service';


@Component({
  selector: 'app-usuario-listar',
  templateUrl: './usuario-listar.component.html',
  styleUrl: './usuario-listar.component.css'
})
export class UsuarioListarComponent implements OnInit, OnDestroy {

  usuarios: Usuario[] = [];
  dtOptions: any = {};
  dtTrigger: Subject<any> = new Subject<any>();
  refreshSubscription!: Subscription;
  id: number| null = null;
  email: string = '';

    constructor(private usuarioService: UsuarioService) { }

    ngOnInit(): 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 }
        ]
      };
      this.listarUsuarios();
      this.refreshSubscription = this.usuarioService.refreshObservable.subscribe(() => {
        this.listarUsuarios();
      })
    }


    listarUsuarios(): void {
      this.usuarioService.listarUsuarios().subscribe({
        next: (data: Usuario[]) => {
          this.usuarios = data;
          this.dtTrigger.next(null);
        },
        error: (error) => {
          console.error('Error al listar usuarios', error);
        }
      });
    }


    mensajeConfirmacion(id: number, email: string): void {
      Swal.fire({
        title: "¿Estás seguro?",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#28a745",
        cancelButtonColor: "#d33",
        confirmButtonText: "Si, ¡elimínalo!",
        cancelButtonText: "Cancelar"
      }).then((result) => {
        if (result.isConfirmed) {
          this.eliminar(id, email);
        }
      });
    }
    

    mostrarNotificacion(titulo: string, texto: string, icono: 'success' | 'error'): void {
      Swal.fire({
        title: titulo,
        text: texto,
        icon: icono
      });
    }


    eliminar(id: number, email: string): void {
      console.log("" + this.id + this.email + id)
      this.usuarioService.eliminarUsuario(id).subscribe({
        next: () => {
          console.log('Usuario eliminado exitosamente');
          //this.usuarios = this.usuarios.filter(usuario => usuario.idusuario !== id); // Actualizamos la lista localmente
          this.mostrarNotificacion("Eliminado", "El usuario " + email + " ha sido eliminado", "success")
        },
        error: (error) => {
          console.error('Error al eliminar usuario', error);
          this.mostrarNotificacion("Error", "Hubo un problema al eliminar el usuario: " + email, "error");
        }
      });
    }


    ngOnDestroy(): void {
      this.dtTrigger.unsubscribe();
      if (this.refreshSubscription) {
        this.refreshSubscription.unsubscribe();
      }
    }



}