방법에 대한 Observables은

Question

내가 (각도 2) 검도의 그리드를 사용하고 있습니다를 사용하여 클라이언트 측에서 데이터로 작업하는 추가/편집/그리드에서 행 삭제 :

http://www.telerik.com/kendo-angular-ui/components/grid/editing/

을 원래의 코드에서, 내가/추가/편집을위한 배열 작업 메모리의 행을 삭제하려면,

private fetch(action: string = "", data?: Product): Observable<Product[]> { 
     return this.jsonp 
     .get(`http://demos.telerik.com/kendo-ui/service/Products/${action}? callback=JSONP_CALLBACK${this.serializeModels(data)}`) 
     .map(response => response.json()); 
    } 

그러나 : 데이터는 다음과 같이 휴식 서비스에서 얻을 수있다. 그런 다음 제출 버튼을 클릭하고 모든 변경 사항과 함께 데이터를 서버로 보냅니다.

이것 내 용액이 같다 :

https://gist.github.com/joedayz/9e318a47d06a7a8c2170017eb133a87e

개요는 :

전용 뷰 : 배열 = [{제품 ID : 1, 제품명

I 배열 선언 : "pelotas", 생산 중단 : undefined, UnitsInStock : 80}];

이 같은 가져 오기 방법 오버라이드 (override) :

private fetch(action: string = "", data?: Product): Observable<Product[]> { 
/*return this.jsonp 
    .get(`http://demos.telerik.com/kendo-ui/service/Products/${action}?callback=JSONP_CALLBACK${this.serializeModels(data)}`) 
    .map(response => response.json());*/ 

    debugger; 

    if(action=="create"){ 
    var product : Product = new Product(-1, data.ProductName, data.Discontinued, data.UnitsInStock); 
    this.view.push(product); 
    }else if(action=="update"){ 
    var indice = this.view.indexOf(data); 

    if(indice>=0) 
    this.view[indice] = (JSON.parse(JSON.stringify(data))); 
    }else if(action=="destroy"){ 
    var indice = this.view.indexOf(data); 

    if(indice>=0) 
    this.view.splice(indice, 1); 

    } 


    return Observable.of(this.view); 
} 

내 질문은이 : 어떤 방식으로 존재 내 그리드에 대한 간단한 또는 반응 형태의 내 배열의 항목의 삭제// 업데이트를 만들 의사 소통?

Answer 1

메모리 내 배열을 사용할 때 Observables를 사용할 필요가 없습니다. Grid 구성 요소는 이미 배열에 바인딩되어 있으므로 데이터를 조작하기 만하면됩니다. 예 :

export class AppComponent { 
    public dataItem: Product; 

    @ViewChild(GridEditFormComponent) protected editFormComponent: GridEditFormComponent; 

    private view: Array<Product> = [{ ProductID: 1, ProductName: "pelotas", Discontinued: undefined, UnitsInStock: 80 }]; 

    public onEdit(dataItem: any): void { 
     this.dataItem = Object.assign({}, dataItem); 
    } 

    public onCancel(): void { 
     this.dataItem = undefined; 
    } 

    public addProduct(): void { 
     this.editFormComponent.addProduct(); 
    } 

    public onSave(product: Product): void { 
     if (product.ProductID === undefined) { 
      this.createProduct(product); 
     } else { 
      this.saveProducts(product); 
     } 
    } 

    public onDelete(e: Product): void { 
     this.deleteProduct(e); 
    } 

    public saveProducts(data: Product): void { 
     var index = this.view.findIndex(x => x.ProductID === data.ProductID); 

     if (index !== -1) { 
      this.view = [ 
       ...this.view.slice(0, index), 
       data, 
       ...this.view.slice(index + 1) 
      ]; 
     } 
    } 

    public createProduct(data: Product): void { 
     this.view = [...this.view, data]; 
    } 

    public deleteProduct(data: Product): void { 
     this.view = this.view.filter(x => x.ProductID !== data.ProductID); 
    } 
}