Question

我需要有关如何在没有点击更新按钮或第一行的情况下始终显示删除按钮的帮助。我从this link学习了一个教程。该项目正在使用angularFire2。他使数据可点击，然后它出现在表单上，然后他可以更新/删除它。我需要做的是使每个行都显示删除按钮，*ngIf="ProductService.selectedProduct.$prdKey != null"条件仍然存在。如果我将条件更改为...==null＆＃34;，则删除按钮始终可见，但按钮将删除所有数据。

＆＃13;

//service.ts file
export class Product {
  $prdKey: string;
  prdName: string;
  prdCat: string; //category
  prdSup: string; //supplier
}

deleteProduct(key: string) {
  this.productList.remove(key);
}

updateProduct(prd: Product) {
  this.productList.update(prd.$prdKey, {
    prdName: prd.prdName,
    prdCat: prd.prdCat,
    prdSup: prd.prdSup,
  })
}

＆＃13;

//component.ts file

isVisible:boolean = true;

onSubmit(form: NgForm) {
  if (form.value.$prdKey == null) {
    this.ProductService.insertProduct(this.ProductService.selectedProduct);
  } else {
    this.ProductService.updateProduct(this.ProductService.selectedProduct);
  }
  this.resetForm(form);
}

onDelete($prdKey: string) {
  if (confirm('Are you sure to delete this record ?') == true) {
    this.ProductService.deleteProduct($prdKey);
  }
}

onItemClick(prd: Product) {
  this.ProductService.selectedProduct = Object.assign({}, prd);
}

＆＃13;

<form #productForm="ngForm" (ngSubmit)="onSubmit(productForm)">
  ...
</form>
<tr *ngFor="let product of productList">
  <td>{{product.prdName}}</td>
  <td>{{product.prdCat}}</td>
  <td>{{product.prdSup}}</td>
  <td><button type="button" (click)="onItemClick(product)">Update</button></td>
  <td><button type="button" *ngIf="ProductService.selectedProduct.$prdKey != null" (click)="onDelete(productForm) || isVisible">Delete</button></td>
</tr>

＆＃13;

Answer 1

因为，您的删除功能需要产品密钥。当您按下删除键时，只需发送$prdKey。删除*ngIf逻辑，因为您已经发送了特定的产品密钥。您之前的逻辑是在按下行后选择产品密钥。

<tr *ngFor="let product of productList">
  <td>{{product.prdName}}</td>
  <td>{{product.prdCat}}</td>
  <td>{{product.prdSup}}</td>
  <td><button type="button" (click)="onItemClick(product)">Update</button></td>
  <td><button type="button" (click)="onDelete(product.$prdKey)">Delete</button></td>
</tr>

具有* ngIf条件的Angular-Make删除按钮始终可见

1 个答案: