手动刷新页面以查看组合中的更改

Question

在我的Range7应用程序中，我有一些组件，所有的数据都来自于我在ngOnInit中调用的API。到目前为止，CRUD运行良好，我正在获得结果，但我面临的唯一问题是每次必须手动刷新页面才能在HTML中看到结果。

component.ts

export class Component implements OnInit {
    public product: Product[];
   constructor(private productService: ProductService){}
    ngOnInit(){
        this.productService.getProducts().subscribe(result =>{
            this.product=result;
            console.log(result);
         });
}

component.html

<dx-data-grid
[dataSource]="product">
<dxi-column dataField="Category " cellTemplate="catTpl"> </dxi-column>
<div *dxTemplate="let t of 'catTpl'">
<span>{{ t.data.categoryId}}</span>
</div>
</dx-data-grid>

Answer 1

如果您正在使用devextreme (我猜是从dx-data-grid HTML元素中)，请尝试

import { ViewChild } from '@angular/core';
import { DxDataGridComponent } from 'devextreme-angular/ui/data-grid';

export class Component implements OnInit {
  @ViewChild(DxDataGridComponent) grid: DxDataGridComponent;
  // more code
  this.productService.getProducts().subscribe(result =>{
        this.product=result;
        console.log(result);
        this.grid.instance.refresh();
  });
}