Angular，TypeError：无法读取未定义的属性“值”答案

【问题标题】：Angular, TypeError: Cannot read property 'value' of undefinedAngular，TypeError：无法读取未定义的属性“值”
【发布时间】：2018-05-03 06:36:22
【问题描述】：

我正在尝试从表中删除一行。但是当我将删除按钮放在一行的末尾时，我收到了一个错误，上面写着TypeError: Cannot read property 'value' of undefined。我关注了这个video link，但我只需要在不将行数据加载到表单的情况下使删除按钮起作用。

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

//component.ts
onDelete(form: NgForm) {
  //fungsi deleteProduct()
  if (confirm('Are you sure to delete this record ?') == true) {
    this.ProductService.deleteProduct(form.value.$prdKey);
    //this.resetForm(form);
  }
}

onItemClick(prd: Product) {
  this.ProductService.selectedProduct = Object.assign({}, prd);
}

<!--the form-->
<form #productForm="ngForm" (ngSubmit)="onSubmit(productForm)">...</form>

<tr *ngFor="let product of productList">
  <td>{{product.prdName}}</td>
  <td><button type="button" class="btn btn-warning" (click)="onItemClick(product)" title="click to edit or delete" data-toggle="modal" data-target="#myModal">Update</button></td>
  <td><button type="button" class="btn btn-danger" *ngIf="ProductService.selectedProduct.$prdKey == null" (click)="onDelete(ProductService.selectedProduct.$prdKey)">Delete</button></td>
</tr>

视频教程版其实是*ngIf="ProductService.selectedProduct.$prdKey != null"。我制作了*ngIf="ProductService.selectedProduct.$prdKey == null"，因此删除按钮将出现在行的末尾，而无需先单击一行。谁能帮我解决这个问题？如果需要更多的 sn-ps，请告诉我。先感谢您。

【问题讨论】：

标签： angular typescript html-table

【解决方案1】：

这是因为 onDelete() 您传递的是 string 类型的键，但在 onDelete() 定义中您期望它为 NgForm 类型。

将onDelete(form: NgForm) { 更改为onDelete(key: string) {

试试这个

onDelete(key: string) {
  //fungsi deleteProduct()
  if (confirm('Are you sure to delete this record ?') == true) {
    this.ProductService.deleteProduct(key);
    //this.resetForm(form);
  }
}

【讨论】：

【解决方案2】：

试试这个

//component.ts
onDelete(key: string) {
  //fungsi deleteProduct()
  if (confirm('Are you sure to delete this record ?') == true) {
    this.ProductService.deleteProduct(key);
  this.productList.remove(key);
    //this.resetForm(form);
  }
}

【讨论】：

【解决方案3】：

有丢失的问题：

<button type="button" class="btn btn-danger" 
        *ngIf="ProductService.selectedProduct.$prdKey == null" 
        (click)="onDelete(ProductService.selectedProduct.$prdKey)">
            Delete
</button>

ProductService.selectedProduct.$prdKey == null 表示当 $prdKey 为 null 时显示删除，所以 onDelete(ProductService.selectedProduct.$prdKey) 这将始终将 null 传递给 onDelete
onDelete(form: NgForm) ，您已将参数设置为 NgForm ，但如上所述，您得到的是 null
form.value.$prdKey这行会抛出错误TypeError: Cannot read property 'value' of undefined

你应该使用：*ngIf="ProductService.selectedProduct.$prdKey != null"，因为它是一个完美的逻辑，并删除所有带有$prdKey null的产品。

【讨论】：