Angular DataTables table 中没有可用数据 - 新绑定

Question

你能告诉我哪里错了吗？快速解释：我想使用这个 Angular DataTables 但有一点不同，我的数据在汽车阵列中。

   cars$: Observable<Car[]>

   constructor(private carService: CarService) { }

   getCars() {
      this.cars$ = this.carService.getCars();
   }

   ngOnInit() {
      this.getCars();   
      this.dtOptions = {
         pagingType: 'full_numbers',
         pageLength: 2
       };   
   }

这里 html

<h3>Cars</h3>
  <table datatable [dtOptions]="dtOptions" class="row-border hover">
    <tfoot>
      <tr>
        <th><input type="text" placeholder="Search ID" name="search-id"/></th>
        <th><input type="text" placeholder="Search first name" name="search-first-name"/></th>
        <th><input type="text" placeholder="Search last name" name="search-last-name"/></th>
      </tr>
    </tfoot>
  </table>
  <table datatable class="row-border hover">
    <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Mark</th>
          <th>Type</th>
          <th>Year</th>
          <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let car of cars$ | async">
            <th>{{ car.id }}</th>
            <th>{{ car.name }}</th>
            <th>{{ car.mark }}</th>
            <th>{{ car.type }}</th>
            <th>{{ car.year }}</th>
            <th>{{ car.description }}</th>
        </tr>
    </tbody>
  </table>

我得到了数据，但它们是在这个网格之后加载的，它的消息是没有可用数据，当然网格不能正常工作

Answer 1

您应该在创建 table 之前等待可观察对象的结果，因此您应该使用这样的 ng-container：

<ng-container *ngIf="(cars$ | async) as cars">
<h3>Cars</h3>
  <table datatable [dtOptions]="dtOptions" class="row-border hover">
    <tfoot>
      <tr>
        <th><input type="text" placeholder="Search ID" name="search-id"/></th>
        <th><input type="text" placeholder="Search first name" name="search-first-name"/></th>
        <th><input type="text" placeholder="Search last name" name="search-last-name"/></th>
      </tr>
    </tfoot>
  </table>
  <table datatable class="row-border hover">
    <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Mark</th>
          <th>Type</th>
          <th>Year</th>
          <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let car of cars">
            <th>{{ car.id }}</th>
            <th>{{ car.name }}</th>
            <th>{{ car.mark }}</th>
            <th>{{ car.type }}</th>
            <th>{{ car.year }}</th>
            <th>{{ car.description }}</th>
        </tr>
    </tbody>
  </table>
<ng-container>

Answer 2

应订阅 Observables 以显示流值：

cars: Car[];

 constructor(private carService: CarService) { }   

 ngOnInit() {
  this.carService.getCars().pipe(take(1)).subscribe(list => {
      this.cars = list;
      this.dtOptions = {
       pagingType: 'full_numbers',
       pageLength: 2
     };   
    });            
 }

...
<tbody>
    <tr *ngFor="let car of cars">
        ...
    </tr>
</tbody>
..

Angular DataTables table 中没有可用数据 - 新绑定

Angular DataTables no data available in table - new binding

angular-datatables

angular