Angular DataTables нет данных в таблице - новая привязка - PullRequest
Новая
       42

Angular DataTables нет данных в таблице - новая привязка

0 голосов
/ 19 марта 2020

Не могли бы вы сказать мне, где я допустил ошибку? Быстрое объяснение: я хотел бы использовать это 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>

, и я получаю данные, но они загружаются после этой сетки и ее сообщения - данные недоступны и, конечно, сетка не работает правильно enter image description here

Ответы [ 2 ]

1 голос
/ 19 марта 2020

Наблюдаемые должны быть подписаны, чтобы показать значение потока: 

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>
..
1 голос
/ 19 марта 2020

Вы должны дождаться результата вашей наблюдаемой, прежде чем создавать свою таблицу, поэтому вы должны использовать ng-контейнер, подобный этому: 

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