最初に更新ボタンまたは行をクリックせずに削除ボタンを常に表示する方法についてのヘルプが必要です。私はこのリンクからチュートリアルを学びます。プロジェクトはangularFire2を使用しています。彼はデータをクリック可能にし、フォームに表示してから更新/削除できます。私がする必要があるのは、*ngIf="ProductService.selectedProduct.$prdKey != null"条件がまだそこにある状態で、各行の削除ボタンをすでに表示することです。条件を...==null「」に変更すると、削除ボタンは常に表示されますが、ボタンはすべてのデータを削除するようになります。
//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,
})
}//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);
}<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>なぜなら、あなたの削除機能はプロダクトキーを期待しているからです$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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加