CODEWITHSUNDEEP
angularangular-datatables
Rafał Developer
Rafał Developer

Reputation: 2055

Angular DataTables no data available in table - new binding

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 enter image description here

Upvotes: 0

Views: 1223

Answers (2)

Adson Rocha
Adson Rocha

Reputation: 51

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

Upvotes: 1

Pauho
Pauho

Reputation: 74

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>

Upvotes: 1

Related Questions