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

Question

我正在使用角度数据表从 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>

App.component.ts

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;

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

}

即使表格有数据，它也显示没有可用的数据

这是我的截图

screenshot

Answer 1

根据角度数据表doc，您必须使用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>

在.ts文件中添加dtTrigger

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

      });
  }

}

别忘了取消订阅活动