剑道网格,通过Api调用Angular 7进行保存和取消操作

问题描述 投票:0回答:1

我将api调用响应绑定到kendo网格,并且能够绑定列中的数据,并且可以进行编辑和保存以进行我绑定到html中的内联编辑,我看到很多通过组件模板绑定的示例不知道这是否对我有效,是否有人可以给我一些剑道的新链接。我需要获取所有编辑行数据,然后单击“保存”按钮,将其转到我的put api调用。[TIA

我的应用程序

HTML

       <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)
  )
  }
kendo-ui angular7 webapi
1个回答
0
投票

您是否遵循剑道的榜样here?这是我在应用程序中使用的。在TypeScript的(save)="saveHandler($event)"函数中,将数据发送到您的API服务进行保存。数据发布后,异步视图将自动更新。

© www.soinside.com 2019 - 2024. All rights reserved.