Question

我有一个问题，我使用Metronic和KendoUI（DataGrid）。我正在尝试从API获取数据。一切正常，但是...当我收到数据DataGrid时，直到我更改Input（所有列的过滤器）中的值后才显示结果。

我希望它用于表的状态...有人知道如何实现/修复它吗？

这是我的TypeScript

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { DataBindingDirective } from '@progress/kendo-angular-grid';
import { process, State } from '@progress/kendo-data-query';
import { HttpClient } from '@angular/common/http';
import { EntidadesService } from './entidades.service';


@Component({
  selector: 'kt-prefirma-entidades',
  templateUrl: './prefirma-entidades.component.html',
  styleUrls: ['./prefirma-entidades.component.scss']
})
export class EntidadesPreFirmaComponent implements OnInit {
  constructor(private entidadesService: EntidadesService) {}
  @ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;
  public gridData: any = this.fromAPI();
  public gridView: any[];
  public gridState: State = {
    sort: [],
    skip: 0,
    take: 10
  };
  public editDataItem;
  public isNew: boolean;
  public mySelection: string[] = [];

  public ngOnInit(): void {
    //   this.fromAPI();
    this.gridView = this.gridData;
  }
  public onFilter(inputValue: string): void {
    this.gridView = process(this.gridData, {
      filter: {
        logic: 'or',
        filters: [
          {
            field: 'nombreEntidad',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'codEntidad',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'division',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'codigoDivision',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'personaAsociada',
            operator: 'contains',
            value: inputValue
          }
        ]
      }
    }).data;

    this.dataBinding.skip = 0;
  }

  fromAPI() {
    this.entidadesService.get().subscribe(entidades => {
      this.gridData = entidades;
    //   this.onFilter('asd');
    });
  }
  public onStateChange(state: State) {
    this.gridState = state;

    // this.editService.read();
  }

  public addHandler() {
    // this.editDataItem = new Product();
    this.isNew = true;
  }

  public editHandler({ dataItem }) {
    console.log(dataItem);
    this.isNew = false;
  }

  public cancelHandler() {
    this.editDataItem = undefined;
  }

  public saveHandler(product) {
    // this.editService.save(product, this.isNew);

    this.editDataItem = undefined;
  }

  public removeHandler({ dataItem }) {
    // this.editService.remove(dataItem);
  }

}

和HTML：

<kendo-grid [kendoGridBinding]="gridData" 
 (dataStateChange)="onStateChange($event)" [kendoGridSelectBy]="'id'" [selectedKeys]="mySelection" [pageSize]="20" [pageable]="true" [sortable]="true" [groupable]="false" [reorderable]="true" [resizable]="true" [height]="480" [columnMenu]="{ filter: false }">
 <ng-template kendoGridToolbarTemplate>
    <input placeholder="Search in all columns..." kendoTextBox (input)="onFilter($event.target.value)" />
    <button kendoGridExcelCommand type="button" icon="file-excel" style="float:right;">Export to Excel</button>
    <button kendoGridPDFCommand icon="file-pdf" style="float:right;">Export to PDF</button>
</ng-template>

     <kendo-grid-messages pagerPage="Página" pagerOf="de" pagerItems="ítems" pagerItemsPerPage="ítems por página">
     </kendo-grid-messages>
     <ng-template kendoGridToolbarTemplate [position]="'top'">
         <div class="col-md-2">
             <button kendoGridAddCommand [icon]="'plus'" [primary]="true" class="arnal-btn-primary new-btn btn-block float-left">
         Nova Entitat
       </button>
         </div>
     </ng-template>
     <kendo-grid-column field="nombreEntidad" title="nombreEntidad"></kendo-grid-column>
     <kendo-grid-column field="codEntidad" title="codEntidad"></kendo-grid-column>
     <kendo-grid-column field="division" title="division"></kendo-grid-column>
     <kendo-grid-column field="personaAsociada" title="personaAsociada"></kendo-grid-column>

 npm
     <kendo-grid-command-column title="command" width="220">
         <ng-template kendoGridCellTemplate>
             <button kendoGridEditCommand [primary]="true">Edit</button>
             <button kendoGridRemoveCommand>Delete</button>
         </ng-template>
     </kendo-grid-command-column>
     <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
         <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
         <kendo-pager-numeric-buttons [buttonCount]="10"></kendo-pager-numeric-buttons>

         <kendo-pager-info></kendo-pager-info>
         <kendo-pager-next-buttons></kendo-pager-next-buttons>
         <kendo-pager-page-sizes [pageSizes]="[5, 10, 15, 20, 25, 30, 35, 'Tots els registres']"></kendo-pager-page-sizes>
     </ng-template>
 </kendo-grid>

 <kendo-grid-edit-form [model]="editDataItem" [isNew]="isNew" (save)="saveHandler($event)" (cancel)="cancelHandler()">
 </kendo-grid-edit-form>

预先感谢基督徒

Answer 1

您异步获取数据，因此在接收到数据并使用它更新网格之后，您需要告诉变更检测器检查变更。

您可以通过将其添加到代码中来实现：

将变更检测器注入添加到构造函数中

constructor(private entidadesService: EntidadesService, private changeDetector: ChangeDetectorRef) {}

询问变更检测器以检查变更：

fromAPI() {
    this.entidadesService.get().subscribe(entidades => {
        this.gridData = entidades;
        //   this.onFilter('asd');

        // Ask the change detector to check for changes at the earliest convenience
        this.changeDetector.markForCheck();
    });
}

直到更改输入值（过滤器），AngularkendoGrid才会显示数据

1 个答案: