Datatable показывает «нет данных, доступных в таблице», даже если строки уже загружены с использованием угловых

Question

Когда я пытался отобразить таблицу данных в угловых значениях, в таблице отсутствуют данные, а в синицах отображаются все записи в таблице.А также функция поиска не работает.когда я набираю что-то в поиске, он отображает «нет данных, доступных в таблице».Смотрите этот скриншот. введите описание изображения здесь dtTrigger.next ();находится в функции afterviewinit, потому что в противном случае она показала ошибку «невозможно реинициализировать таблицу данных».

forum-admin-list.component.ts

    import { Component, OnInit ,OnDestroy,AfterViewInit,ViewChild} from '@angular/core';
    import { AngularFirestore } from '@angular/fire/firestore';
    import { PostService } from 'src/app/shared/post.service';
    import { Post } from 'src/app/shared/post.model';
    import { ToastrService } from 'ngx-toastr';
    import { Subject } from 'rxjs';
    import { DataTableDirective } from 'angular-datatables';

    @Component({
      selector: 'app-forum-admin-list',
      templateUrl: './forum-admin-list.component.html',
      styleUrls: ['./forum-admin-list.component.css']
    })
    export class ForumAdminListComponent implements OnInit,OnDestroy,AfterViewInit {
      list: Post[];
      dtTrigger: Subject<string> = new Subject();
      @ViewChild(DataTableDirective)
      dtElement: DataTableDirective;

      constructor(private service: PostService,private firestore: AngularFirestore,private toastr:ToastrService) { }

      ngOnInit() {
        this.service.getPost().subscribe(actionArray => {
          this.list = actionArray.map(item => {
            return {
              id: item.payload.doc.id,
              ...item.payload.doc.data()
            } as Post;
          })

        });
      }
      onEdit(p: Post){
        this.service.formData = Object.assign({},p);
      }

      onDelete(id: string){
        if(confirm("Are you sure to delete this record")){
            this.firestore.doc("post/"+id).delete();
            this.toastr.warning("Deleted Successfully");
        }
      }

      ngAfterViewInit(): void {this.dtTrigger.next();}

      ngOnDestroy(): void {
        // Do not forget to unsubscribe the event
        this.dtTrigger.unsubscribe();
      }

      rerender(): void {
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
           dtInstance.destroy();
           this.dtTrigger.next();     
       });}
    }

forum-admin-list.component.html

    <table datatable class="row-border hover" [dtTrigger]="dtTrigger">
      <thead class="thead-dark">
        <tr>
          <th>Post Number</th>
          <th>Title</th>
          <th>Description</th>
          <th>Date of Publish</th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let post of list">
          <td>{{post.pNo}}</td>
          <td>{{post.title}}</td>
          <td>{{post.description}}</td>
          <td>{{post.date}}</td>
          <td><a class="btn text-danger" (click)="onDelete(post.id)"><i class="fa fa-trash"></i></a></td>
          <td><a class="btn text-primary" (click)="onEdit(post)"><i class="fa fa-edit"></i></a></td>
        </tr>
      </tbody>
    </table>

post.service.ts

    import { Injectable } from '@angular/core';
    import { Post } from './post.model';
    import { AngularFirestore } from '@angular/fire/firestore';
    @Injectable({
      providedIn: 'root'
    })
    export class PostService {
      formData: Post; 
      constructor(private firestore: AngularFirestore) { }

      getPost(){
        return this.firestore.collection('post').snapshotChanges();
      }
    }