将 Kendo UI 网格更改绑定到其他 kendo 组件

Question

我的组件中有一个 Kendo UI 网格。我在该组件中也有一个 Kendo 开关。我希望在切换开关时刷新网格。开关的值将影响网格中使用的数据。我怎么做？我的网格数据来自 DataBindingDirective。所以，它看起来像这样：

我的-component.html

<kendo-switch [(ngModel)]='showDeleted' (click)="onShowDeleted($event)"> 
</kendo-switch>
<kendo-grid
       myDataBinding
...
...
></kendo-grid>

我的-component.ts

 showDeleted = true;
 onShowDeleted(event): void {
    this.myService.showDeleted = this.showDeleted;
    // todo: force grid refresh
    }

MyDatabinding.ts（扩展数据绑定指令）

constructor(private myService: MyService, grid: GridComponent) {
        super(grid);
    }

public ngOnInit(): void {
    this.subscription = this.myService.subscribe((result) => {
        this.grid.data = result;
    });
this.rebind();
}

public rebind(): void {
        this.myService.query(this.state);
    }

MyService.ts（扩展 BehaviorSubject）

public query(state: any): void {
    this.fetch(state).subscribe(x => super.next(x));
  }

private fetch(state: any): Observable<GridDataResult> {
//get data here
}

Answer 1

我不确定你的服务是怎么写的。我假设您正在学习教程 here（您的服务扩展 extends DataBindingDirective）。

在这种情况下，这应该有效：

<kendo-switch [(ngModel)]='showDeleted' (valueChange)="onValueChange($event)"></kendo-switch>

onValueChange(event): void {
    this.rebind();
}

我不确定你所说的

是什么意思

The value from the switch will have an effect on the data used in the grid.

如果你想在客户端上操作数据，你可以在 subscribe 方法中进行。

澄清后编辑 (@BradL.)

这是全新的故事。 Here 是一个工作 plunkr。打开开发者工具，更改开关值并观察控制台 window.

关键部分：

//remote-binding.directive:
@Input() myFilter = false;

public rebind(): void {
        console.log("Grid will be refreshed. Switch value is: ", this.myFilter);
        this.products.query(this.state);
    }

//app.component.ts:
        <kendo-switch [(ngModel)]="checked" (valueChange)="onValueChange()"></kendo-switch>

        <kendo-grid
            productsBinding
            [myFilter]="checked"         //<-----------

  @ViewChild(ProductsBindingDirective) dataBinding: DataBindingDirective;

  public onValueChange()
  {
    window.setTimeout(()=>this.dataBinding.rebind());

  }

将 Kendo UI 网格更改绑定到其他 kendo 组件

Bind Kendo UI Grid change to other kendo component

angular

kendo-ui

kendo-ui-angular2

kendo-ui-grid