角度属性セレクタ：出力バインドが機能しない

Question

私は2つのコンポーネントを持っています：リストと行です。

リストコンポーネントのテンプレートでは、私はテーブルを使用してngForと行を機能させるために、私は（角括弧を使用してIE）子コンポーネントの属性セレクタを使用していたが：

@Component({ 
    selector: '[my-tr]' 
. 
. 
}) 

子コンポーネントはまた、宣言、初期化して、ボタンが押されたときに発生器の出力があります。親コンポーネントに続いて

@Output() onItemDeleted: EventEmitter<SubscriberListItem>; 
.. 
this.onItemDeleted = new EventEmitter<SubscriberListItem>(); 
.. 
this.onItemDeleted.emit(this.item); 

を次のように、テンプレートは、テーブルの行として子が含まれています

<td width="25%">{{item.name}}</td> 
<td width="40%">{{item.street}}</td> 
<td width="5%">{{item.postCode}}</td> 
<td width="30%"> 
    <button (click)="removeItem($event)">DELETE</button>   
</td> 

ここで問題だ：削除ボタンが行に押されたときに、行コンポーネントのハンドラが呼び出されます。

removeItem(event: any): void { 
    this.onItemDeleted.emit(this.item); 
} 

<table> 
<tbody> 
<tr my-tr *ngFor="let item of items" [item]="item" (onItemDeleted)="removeItem($event)"></tr> 
</tbody> 
</table> 

そしてここでは、行のテンプレートですこれはいい。しかし、エミッタを起動しようとすると、エミッタは決して親に届きません。私は次のエラーを見ている、ブラウザのコンソールでみる：

ERROR TypeError: co.removeItem is not a function 
    at Object.eval [as handleEvent] (SubscribersListComponent.html:191) 
    at handleEvent (core.es5.js:11799) 
    at callWithDebugContext (core.es5.js:13007) 
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:12595) 
    at dispatchEvent (core.es5.js:8773) 
    at core.es5.js:10638 
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3840) 
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:236) 
    at SafeSubscriber.next (Subscriber.js:185) 
    at Subscriber._next (Subscriber.js:125) 
    at Subscriber.next (Subscriber.js:89) 
    at EventEmitter.Subject.next (Subject.js:55) 
    at EventEmitter.emit (core.es5.js:3814) 
    at SubscriberRowComponent.webpackJsonp.537.SubscriberRowComponent.removeItem (subscriber-row.component.ts:35) 
    at Object.eval [as handleEvent] (SubscriberRowComponent.html:7) 

これは私が子コンポーネント用のテーブル行の属性セレクタを使用しているという事実とは何かです。行の出力バインディングのコンテキストは親コンポーネントではないため、 'removeItem'関数が見つかりません。

誰でも私がこれを解決するのを助けることができますか、修正を提案できますか？

非常に高く評価されています。

Answer 1

ない私が得た場合は、正しく動作しますが、ここで簡単な例であることを確認してください：

@Component({ 
    selector: '[my-tr]', 
    template: '{{item}} <button (click)="removeItem($event)">DELETE</button>' 
}) 
export class MyTr { 
    @Input() item: any; 
    @Output() onItemDeleted = new EventEmitter<any>; 

    removeItem(event: any): void { 
    this.onItemDeleted.emit(this.item); 
    } 
} 
@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <div my-tr *ngFor="let item of items" [item]="item" (onItemDeleted)="removeItem($event)"></div> 
    </div> 
    `, 
}) 
export class App { 
    items = ['a', 'b', 'c']; 

    name:string; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 

    removeItem(item) { 
    console.log('removeItem', item); 
    } 
}