子を削除して親リストを更新する

Question

私はtransactionsのリストを持つ親コンポーネントを持っています。

<table class="table awaken-table"> 
    <thead> 
     <tr> 
      <th>Actions</th> 
     </tr> 
    </thead> 
    <tbody> 
     <transaction-row style="display:table-row;line-height:32px;" *ngFor="let transaction of transactions | orderDate" [transaction]="transaction"></transaction-row> 
    </tbody> 
</table> 

を...とtransaction-rowはそうのようになります：彼らはそうのように表示されている私は、私は成功した項目を削除アイコンをクリックしdeleteAlert()を呼び出すと

@Component({ 
    selector: 'transaction-row', 
    template: ` 
      <td text-center style="font-size:16px"> 
       <i class="fa fa-trash danger" style="font-size:20px;" (click)=deleteAlert()></i> 
      </td> 
    ` 
}) 

export class TransactionRow { 
    @Input() transaction: any; 

    ... 
} 

が、それはリストとして上に残っていますtransactionsは更新されていません。

どのように私は（私はそれが私はそれを使用する方法と非常に不慣れだ@Outputに関係していることを確認しています。）transactions

のリストから

Answer 1

使用をこのtransactionを削除するには持つEventEmitterこのような子コンポーネントに：HTMLで

import { Input, Output, Component, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'transaction-row', 
    template: ` 
      <td text-center style="font-size:16px"> 
       <i class="fa fa-trash danger" style="font-size:20px;" (click)=deleteAlert()></i> 
      </td> 
    ` 
}) 

export class TransactionRow { 
    @Input() transaction: any; 
    @Output() deleteRow: EventEmitter<any> = new EventEmitter<any>(); 
    ... 

    deleteAlert(){ 
     ... 
     this.deleteRow.emit(this.transaction); 
    } 
} 

deleteRowをイベントに耳を傾けます

、最終的には自分の親コンポーネントスプライス取引配列の

<transaction-row style="display:table-row;line-height:32px;" *ngFor="let transaction of transactions | orderDate" [transaction]="transaction" (deleteRow)="onDeleteRow($event)"></transaction-row> 

：

... 

    onDeleteRow(item: any) { 
     this.transactions.splice(this.transactions.indexOf(item),1); 
    } 
...