【问题标题】：Angular, Delete a row become delete entire tableAngular，删除一行变成删除整个表
【发布时间】：2017-11-21 11:17:53
【问题描述】：

我正在尝试使用 angular 4 和 html-table 来创建删除行函数。但显然我犯了一个愚蠢的错误，该功能应该只是删除一行现在变成删除整个表。谁能帮我看看哪里出了问题？

//service .ts
export class Product {
  $prdKey: string;
  prdName: string;
  prdCat: string; //category
  prdSup: string; //supplier
}

deleteProduct(key: string) {
  this.productList.remove(key);
}

//component.ts
onDelete($prdKey: string) {
  if (confirm('Are you sure to delete this record ?') == true) {
    this.ProductService.deleteProduct($prdKey);

  }
}

<!--component.html-->
<!--Form-->
<form #productForm="ngForm" (ngSubmit)="onSubmit(productForm)">
  <input type="hidden" name="$prdKey" #$prdKey="ngModel" [(ngModel)]="ProductService.selectedProduct.$prdKey">

  <div class="form-group">
    <label>Product Name</label>
    <input class="form-control" name="prdName" #prdName="ngModel" [(ngModel)]="ProductService.selectedProduct.prdName">
  </div>

  <div>
    <label>Product Category:</label>
    <select #category="ngModel" name="prdCategory" [(ngModel)]="ProductService.selectedProduct.prdCat" class="form-control">
              <option value="Liquid">Liquid</option>
              <option value="Solid">Solid</option>
              <option value="Gas">Gas</option>  
            </select>
  </div>

  <div class="form-group">
    <label>Supplier</label>
    <input class="form-control" name="prdSup" #supplier="ngModel" [(ngModel)]="ProductService.selectedProduct.prdSup" placeholder="supplier">
  </div>

  <div class="form-group">
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  </div>
</form>

<!--delete button-->
<button type="button" (click)="onDelete(ProductService.selectedProduct.$prdKey)">Delete</button>

插入和更新功能正常工作。所以我认为问题只在我的删除功能中。它应该只从表中删除一行。如果需要更多的 sn-ps，请告诉我。提前谢谢你。

我的函数是基于this tutorial

【问题讨论】：

标签： angular typescript html-table crud

【解决方案1】：

专注于功能：

deleteProduct(key: string) {
  this.productList.remove(key);
}

remove 不是标准 JavaScript / TypeScript Array 上的函数。

修复

检查productList 表示的实际类型的文档，并从他们的代码中验证他们在`remove.

【讨论】：