问从Api调用Angular 7的kendo grid保存和取消操作

EN

       <kendo-grid [data]="ForecastProductionQuantity" 
              [pageSize]="10" [pageable]="true" [resizable]="true"
              [scrollable]="scrollable" [filterable]="true"
              [height]="650">
           <kendo-grid-column field="AmgName">
           <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
              {{gridHeaders["AmgName"]}}
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="ProdQty.ProdQty0">
      <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
        {{gridHeaders["ForecastType0"]}}
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="ProdQty.ProdQty1">
      <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
        {{gridHeaders["ForecastType1"]}}
      </ng-template>
    </kendo-grid-column>

  </kendo-grid>
Component.ts
 loadForecastQuantityData() {
//keeping it 0 will be incorporated after Go click is integrated will be changed as per save input 
this.allocationSetupID = 0;
return this.restapi.getForecastProductionQuantityData(this.allocationSetupID, this.ForecastID).subscribe((data: {}) => {
  this.ForecastProductionQuantity = data;

  for (var prod in this.ForecastProductionQuantity) {

    this.gridHeaders = {
      AmgName: "Amg Name",
      ForecastType0: this.ForecastProductionQuantity[prod].Forecast_type.ForecastType0 + " " + this.ForecastProductionQuantity[prod].ProdMonth.ProdMonth0,
      ForecastType1: this.ForecastProductionQuantity[prod].Forecast_type.ForecastType1 + " " + this.ForecastProductionQuantity[prod].ProdMonth.ProdMonth1,

    }

  }

}, (err) => {
  console.log(err);

})
 }
  service.ts
getForecastProductionQuantityData(allocationSetupID: any, ForecastID: any): Observable<any> {
return this.http.get<any>(this.apiURL + '/GetProductionVolume/' + allocationSetupID + '/' + 
  ForecastID )
  .pipe(
    retry(1),
    catchError(this.handleError)
  )
  }