Question

当我尝试以角度显示数据表时，它显示表中没有可用数据，但tit显示表中的所有记录。而且搜索功能不起作用。当我在搜索中键入内容时，它显示“表中没有可用数据”。查看此屏幕截图。 enter image description here dtTrigger.next（）;在afterviewinit函数中，因为否则它显示错误“无法重新初始化数据表”。

论坛管理列表.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();
      }
    }

Answer 1

这是因为无法为您的POST请求很好地生成新的数据表。我们必须删除旧表以加载您的POST数据。按照以下步骤修改代码。

论坛管理列表.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';
declare var $: any;

@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[];
    idIndex: any;

    @ViewChild(DataTableDirective)
    dtElement: DataTableDirective;
    dtTrigger: Subject<any> = new Subject();

  constructor(private service: PostService,private firestore: AngularFirestore,private toastr:ToastrService) {
       this.idIndex = 1; 
  }

  ngOnInit() {
    var id = 'tblAdmin' + this.idIndex;
    var table = $('#' + id).DataTable();
    table.destroy();

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

  }
  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();
  }
}

forum-admin-list.component.html

<table id="{{'tblAdmin' + idIndex}}" datatable class="row-border hover" [dtTrigger]="dtTrigger">

Datatable显示“表中没有可用数据”，即使已使用Angular加载了行

1 个答案: