Аргумент типа '{смещение: число; } 'нельзя назначить параметру типа' DataTableParams '

Question

Я новичок в Angular 6 и мне нужна помощь по приведенному ниже коду из преобразования Angular 2 в Angular 6.получение ошибки ' Аргумент типа' {смещение: число;} 'нельзя назначить параметру типа «DataTableParams».Объектный литерал может указывать только известные свойства, а смещение не существует в типе «DataTableParams»

private initializeTable(products: Product[]) {
    this.tableResource = new DataTableResource(products); 
    this.tableResource.query({offset: 0, limit: 10}) 
      .then(items => this.items = items);
    this.tableResource.count()
      .then(count => this.itemCount = count);
  }

Приведенный выше код генерирует ошибку в this.tableResource.query ({offset: 0,предел: 10}) раздел

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ProductService } from '../../product.service';
import { Subscription } from 'rxjs/Subscription';
import { Product } from 'models/product';
import { DataTableResource } from 'mdata-table';

private initializeTable(products: Product[]) {
    this.tableResource = new DataTableResource(products);
    this.tableResource.query({offset: 0, limit: 10}) 
      .then(items => this.items = items);
    this.tableResource.count()
      .then(count => this.itemCount = count);
  }

Нужна помощь и совет для решения этой проблемы

Вот полный код

export class AdminProductsComponent implements OnInit,OnDestroy {
  products: Product[];
  subscription: Subscription;

  itemResource: DataTableResource<Product>;
  items: Product[] = [];
  itemCount = 0;

  constructor( private prodService: ProductService) { }

  ngOnInit() {
    this.subscription = this.prodService.getAll().subscribe( prods => {
      this.products = prods;
      this.initializeTable(this.products); });
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  filter(query: string) { 
    let filteredProducts = (query) ?
      this.products.filter(p => p.title.toLowerCase().includes(query.toLowerCase())) :
      this.products;

    this.initializeTable(filteredProducts);
  }

  reloadItems(params) {
    if ( !this.itemResource ) {return null; }
    this.itemResource.query(params).then(items => this.items = items);
  }

  private initializeTable( products: Product[]) {
    this.itemResource = new DataTableResource(products);
    this.itemResource.query({ offset: 0}).then(items => this.items = items );
    this.itemResource.count().then(count => this.itemCount = count );
  }
}

html details

<div class="row">
  <div class="col-12">
    <button class="btn btn-primary" routerLink="/admin/products/new"  >Create a New Product</button>

    <div class="mt-3 mb-3">
        <input type="text" class="form-control" #queryStm (keyup)="filter(queryStm.value)" name="search" id="search" placeholder="Search ...">
    </div>

     <data-table id="my-products"
      [title]="'Products'"
      [items]="items"
      [itemCount]="itemCount"
      (reload)="reloadItems($event)"
      >
        <data-table-column
        [property]="'title'"
        [header]="'Name'"
        [sortable]="true"
        [resizable]="true"  >
    </data-table-column>

        <data-table-column
            [property]="'price'"
            [header]="'Price'"
            [sortable]="true">            
            <ng-template #dataTableCell let-item="item">
                <span>{{ item.price | currency:'USD':'symbol-narrow' }}</span>
            </ng-template>
        </data-table-column>
        <data-table-column
        [property]="'$key'"  
      >
        <ng-template #dataTableCell let-item="item">
          <a [routerLink]="['/admin/products/', item.$key]">Edit</a>
        </ng-template>
      </data-table-column>
    </data-table>
  </div>
</div>

Answer 1

Случайно, вы используете эту библиотеку?https://www.npmjs.com/package/mdata-table Если это так, вы можете переместить свою конфигурацию в части шаблона:

<data-table id="my-products"
      [title]="'Products'"
      [items]="items"
      [size]="10"  <---------- HERE
      [itemCount]="itemCount"
      (reload)="reloadItems($event)"
      >

, а затем удалить вызов query () в initializeTable ().

private initializeTable(products: Product[]) {
    this.tableResource = new DataTableResource(products);
    //this.tableResource.query({offset: 0, limit: 10})  <--- REMOVED
    //  .then(items => this.items = items);
    this.tableResource.count()
      .then(count => this.itemCount = count);
  }

Answer 2

Я просто догадываюсь здесь, так как вы не выставили свой объект / интерфейс DataTableParams.

Исходя из сообщения об ошибке, ваша функция query () ожидает параметр объекта / интерфейса DataTableParams. Вы должны по крайней мере создать действительный аргумент при вызове функции query ().

private initializeTable(products: Product[]) {
    const params: DataTableParams = {offset: 0, limit: 10}; //<----HERE
    this.tableResource = new DataTableResource(products); 
    this.tableResource.query(params)
      .then(items => this.items = items);
    this.tableResource.count()
      .then(count => this.itemCount = count);
  }