angular - Angular- kendoGrid 在更改输入值(过滤器)之前不显示数据
问题描述
我有一个问题,我使用 Metronic 和 KendoUI(DataGrid)。我正在尝试从 API 获取数据。一切正常,但是...当我收到数据时,DataGrid 不会显示结果,直到我更改输入中的值(过滤所有列)。
我希望它是为了桌子的状态......有人知道如何实现/修复它吗?
这是我的打字稿
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>
在此先感谢基督教
解决方案
您异步获取数据,因此在收到数据并使用它更新网格后,您需要告诉更改检测器检查更改。
您可以通过将其添加到您的代码中来做到这一点:
将变更检测器注入添加到您的构造函数
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(); }); }
推荐阅读
- webpack - Webpack DevServer 不重新加载页面
- python - 使用断言 Python 进行测试时语法无效
- synchronization - 是否可以使用相同的时间戳将 dygraphs 与其他图表同步?
- python - 没有for循环的numpy数组求和
- php - 文件上传错误并将数据插入 php myadmin
- postgresql - 具有 50M 和 30K 条目的表的内部联接
- nginx - 如何在一个 Ubuntu 18.04 服务器上将 Nginx 配置为 Web 服务器和 Apache 的反向代理
- multithreading - Scala 在服务器上执行期货的方式与在开发机器上不同
- python - 如何在 Python 中使用`async for`?
- asp.net - asp.net mvc 使用 SCrypt 比较密码