各行に削除ボタンがあるテーブルがあります。ボタンをクリックすると、データが削除されます。ただし、レコードが削除されたことを確認するには、ページを更新する必要があります。削除ボタンをクリックすると、現在の行を非表示にします。これが私のコードです。
<table>
<tr>
<th>Delete</th>
<th>Id</th>
<th>Name</th>
</tr>
<tr *ngFor="let person of people" *ngIf="!hideRow">
<td><button (click)="delete(person.id)" title="Delete">Delete</button></td>
<td>person.Id</td>
<td>person.Name</td>
</tr>
</table>
そして私のcomponent.tsで削除時にhideRowの値を変更します
delete(id) {
this.hideTr = true;
this.personService.delete(id).subscribe(p=> console.log(p));
}
hideRowは、デフォルト値がfalseのブール変数です。問題は、削除をクリックすると、すべての行が非表示になることです（もちろん）。現在の行だけを参照するにはどうすればよいですか？
あなたが提供したコードに基づいて、私はこの部分*ngIf="!hideRow"を削除し、これをあなたのコンポーネントに追加します
delete(id) {
this.personService.delete(id).subscribe(p=> {
console.log(p);
this.people.filter( person => person.id !== id)
// or you can use splice by using the index
});
}
これで、HTMLがよりシンプルになり、使用する必要がなくなりました。 *ngIf
<table>
<tr>
<th>Delete</th>
<th>Id</th>
<th>Name</th>
</tr>
<tr *ngFor="let person of people">
<td><button (click)="delete(person.id)" title="Delete">Delete</button></td>
<td>person.Id</td>
<td>person.Name</td>
</tr>
</table>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加