使用 angular 和 sweetalert2 使用 kendo-grid 删除方法

Question

我的问题是，在我尝试绑定执行该方法所需的数据后，它没有做任何事情。它只会弹出 sweetalert，但是当我同时单击两个按钮时，没有任何反应。任何 solution/guide 这个吗？

我使用 api 在本地执行方法运行。

HTML

<kendo-grid
    [kendoGridBinding]="prod"
    [filterable]="true"
    [groupable]="true"
    [sortable]="true"
    [pageSize]="10"
    [pageable]="true"
    [height]="510">
    <kendo-grid-column field="productId" title="Product ID" [width]="70"></kendo-grid-column>
    <kendo-grid-column field="productName" title="Product Name" [width]="120"></kendo-grid-column>
    <kendo-grid-column field="productNumber" [width]="100"></kendo-grid-column>
    <kendo-grid-column field="description" [width]="130"></kendo-grid-column>
    <kendo-grid-column title="command" width="100">
            <ng-template kendoGridCellTemplate let-dataItem>
                <button kendoGridEditCommand [primary]="true">Edit</button>
                <button
                  [swal]="{ title: 'Delete Product', 
                            text: 'this will delete permanently',
                            cancelButtonColor:'#d33',
                            showCancelButton:true,
                            cancelButtonText:'Cancel',
                            confirmButtonColor:'#000000',
                            confirmButtonText:'Delete'}"
                  (confirm)="deleteProduct(dataItem.productId)">
                  Delete
                </button>
            </ng-template>
    </kendo-grid-column>
</kendo-grid>

component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
@Injectable()
export class ProductListComponent implements OnInit {

  constructor(private http:HttpClient) {}

  prod : any;

  ngOnInit() {
    this.listProduct();
  }

  getProduct(){
    return this.http.get("http://localhost:51024/api/Product/GetAllProduct");
  }

  listProduct() {
    this.getProduct().subscribe((data) => this.prod=data);
  }

  public deleteProduct(productId: number): void {
    this.http.delete("http://localhost:51024/api/Product/"+productId);
  }
}

Answer 1

我认为你需要订阅删除。否则不执行。

public deleteProduct(productId: number): void {
   this.http.delete("http://localhost:51024/api/Product/"+productId)
   .subscribe(response => ...);
}

使用 angular 和 sweetalert2 使用 kendo-grid 删除方法

Delete method with kendo-grid using angular and sweetalert2

kendo-ui

kendo-grid

kendo-ui-angular2

angular