イベントバインディングが動作しないAngular2

Question

クリックしたdivコンテンツを別のdiv内に表示したい（補間を使用）。しかしdivをクリックすると、 "view" divの中に何も表示されません。下記の私のコードを見てください：

@Component({ 
selector: 'my-app', 
template: ` 
<div class="wrap"> 
    <div (click)="clicked($event)"> 
    <h2>Hello {{name}}</h2> 
    </div> 
    <div (click)="clicked($event)"> 
    <h2>Hello {{year}}</h2> 
    </div> 
    <div (click)="clicked($event)"> 
    <h2>Hello {{surname}}</h2> 
    </div> 
    <div (click)="clicked($event)"> 
    <h2>Hello {{country}}</h2> 
    </div> 
    <div (click)="clicked($event)"> 
    <h2>Hello {{cartoon}}</h2> 
    </div> 
</div> 

<div class="view"> 
    {{target}} 
</div> 

    `, 
}) 
export class App { 
    name:string; 
    year: string; 
    surname: string; 
    country: string; 
    cartoon: string; 


    clicked(event) { 
    var target = event.target; 
    } 


constructor() { 
this.name = 'Angular2' 
this.year = '1989' 
    this.surname = 'Connor' 
    this.country = 'USA' 
    this.cartoon = 'Tom & Jerry' 
    } 



} 

期待どおりに動作しません。 Here's my Plunker example

私のコードに問題がありますか？

Answer 1

テンプレートへの結合は、thisである。イベントをローカル変数にバインドしています。 だからあなたのクラスには、次のようになります。

export class App { 
    name:string; 
    year: string; 
    surname: string; 
    country: string; 
    cartoon: string; 
    element: any; 
    target:any; 

    clicked(event) { 
    this.target = event.target.innerText; 
    } 

更新plunker：https://plnkr.co/edit/cnA0nGTjdsHGqCKWTQ7c?p=preview