'{ offset: number; 类型的参数}' 不可分配给“DataTableParams”类型的参数

Question

我是 Angular 6 的新手，需要就以下从 Angular 2 到 Angular 6 的转换代码获得一些帮助。得到一个错误'类型的参数'{偏移量：数字; }' 不可分配给“DataTableParams”类型的参数。 对象字面量只能指定已知属性，“DataTableParams”类型中不存在“offset”

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, limit: 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详情

<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

我只是在这里猜测，因为您没有公开 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);
  }

Answer 2

您是否正在使用这个库？ https://www.npmjs.com/package/mdata-table 如果是这样，您可以在模板部分中移动您的配置：

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

然后，在 initializeTable() 中移除 query() 的调用。

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);
  }