角4：動的に生成された行を削除するにはどうすればよいですか？

Question

私はユーザーの詳細を持っているAngular 4アプリケーションを構築しています。 テーブルには、クリックされたときに行が動的に生成される追加ボタンがあります。行には、ユーザーの詳細はほとんどなく、対応する行を削除するための削除ボタンがあります。私は行を動的に作成することができます。対応する行を削除するために、私はそれを行うのか分からない。私は

<td> <input type="button" value="Delete" name="Delete" id="deleteRowBtn" (click)="deleteRow($(this))"></td> 

のdeleteRow機能が

console.log("deleting row"); 
    thisObj.closest('tr').empty(); 

これは動作しませんを持っている、などの機能を割り当てようとしました。誰かがこれでお勧めできますか？

Answer 1

コンポーネントをモデルから更新して行を削除するだけで済みます。

<tr *ngFor=" let x of users; let i = index;"> 
    <td>{{x.someUserData}}</td> 
    <td><input type="button" value="Delete" name="Delete" id="deleteRowBtn" (click)="deleteRow(i)"></td> 
</tr> 

次に、あなたはuは `* ngFor`を使用して表の行を生成している。このインデックス

deleteRow (index:number) { 
    this.users.splice(index, 1); //replace your Model here instead of this.user 
}