* ngIf条件が常に表示される角度作成削除ボタン

Question

クリック更新ボタンまたは行がなくても、削除ボタンを常に表示させる方法については、ヘルプが必要です。私はthis linkからチュートリアルを学びます。プロジェクトは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>

Answer 1

あなたの削除機能がある、ので、プロダクトキーが必要です。削除キーを押したときに$prdKeyを送信してください。を削除してくださいロジック。すでに特定のプロダクトキーを送信しているためです。以前のロジックは、行を押した後にプロダクトキーを選択することでした。

<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>