Angular 事件绑定不起作用2

我希望单击的div内容显示在另一个div中（通过插值）。但当我点击一个div时，我的“视图”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'
  }



}

@组件({
选择器：“我的应用程序”，
模板：`
你好{{name}
你好{{year}
你好{{姓氏}
你好{{国家}
你好{{卡通}
{{target}}
`,
})
导出类应用程序{
名称：字符串；
年份：字符串；
姓氏：弦；
国家：字符串；
卡通：弦；
点击（事件）{
var target=event.target；
}
构造函数（）{
this.name='Angular2'
今年='1989'
this.姓氏='Connor'
this.country='USA'
这幅卡通画是《汤姆和杰瑞》
}
}

它没有按预期工作。

---

我的代码有什么问题？

绑定到模板是使用

这个

。您正在将事件绑定到局部变量。 所以你的班级应该是这样的：

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：