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

Question

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

我的组件.html

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

我的组件.ts

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

MyDatabinding.ts（扩展 DataBindingDirective）

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

我不知道你的陈述是什么意思

来自开关的值会影响在 网格。

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

澄清后编辑 (@BradL.)

这是一个全新的故事。 Here 是一个工作的笨蛋。打开开发者工具，修改开关值，观察控制台窗口。

关键部分：

//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());

  }