Question

我是Angular 6的新手，需要从Angular 2到Angular 6转换的以下代码方面获得帮助。出现错误“ 类型为“ {的偏移量：数字； }”不可分配给“ DataTableParams”类型的参数。对象文字可能仅指定已知属性，并且'offset'在'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，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);
  }

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

2 个答案: