Angular DataTables no data available in table - new binding

Question

Could you tell me where I made mistake? Quick explanation: I woulud like to use this Angular DataTables but is one different I have my data in car array.

   cars$: Observable<Car[]>

   constructor(private carService: CarService) { }

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

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

and here 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>

and I get data but they are load after this grid and it`s message - no data available and of course grid does not work correct

Pauho · Accepted Answer · 2020-03-19 11:04:05Z

You should wait the result of your observable before creating your table so you should use an ng-container like this:

<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>

Adson Rocha · Accepted Answer · 2020-03-19 11:13:28Z

1

Observables should be subscribed to show the stream value:

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>
..

answered Mar 19, 2020 at 11:13

Adson Rocha

516 bronze badges

Collectives™ on Stack Overflow

Angular DataTables no data available in table - new binding

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related