Angular 角度数据表数据未从API正确绑定

我使用angular datatable我从api获取数据，但该表未正确绑定下面是我的代码

App.component.html

<table datatable [dtOptions]="dtOptions" class="row-border hover">
  <thead>
  <tr>
    <th>ID</th>
    <th>Title</th>
    <th>Body</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let post of posts">
    <td>{{ post.id }}</td>
    <td>{{ post.title }}</td>
    <td>{{ post.body }}</td>
  </tr>
  </tbody>
</table>

即使表中有数据，也显示没有可用数据

这是我的截图

根据角度数据表，您必须使用

dtTrigger

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
  <thead>
  <tr>
    <th>ID</th>
    <th>Title</th>
    <th>Body</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let post of posts">
    <td>{{ post.id }}</td>
    <td>{{ post.title }}</td>
    <td>{{ post.body }}</td>
  </tr>
  </tbody>
</table>

---

不要忘记取消订阅事件

控制台错误？Headlush无错误

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
  <thead>
  <tr>
    <th>ID</th>
    <th>Title</th>
    <th>Body</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let post of posts">
    <td>{{ post.id }}</td>
    <td>{{ post.title }}</td>
    <td>{{ post.body }}</td>
  </tr>
  </tbody>
</table>

import {Component, OnInit} from '@angular/core';
import {CovidApiService} from '../../services/covid-api.service';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  dtOptions: DataTables.Settings = {};
  posts;

   //use this trigger because fetching the list of posts can be quite long,
  dtTrigger: Subject<any> = new Subject<any>(); 
  
  constructor(private covidApiService: CovidApiService, private http: HttpClient) {
  }


  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };

    this.http.get('http://jsonplaceholder.typicode.com/posts')
      .subscribe(posts => {
        this.posts = posts;
        // Calling the DT trigger to manually render the table
        this.dtTrigger.next();

      });
  }

}