Angular 2数据绑定到非输入

Question

Angular 2版本：rc.1

我使用* ngFor和返回表格中的名称和地点列表我希望将数据绑定到我单击组件中的变量的单元格。

component.html

<tr *ngFor="let result of Results$">
  <td #foo (click)="passValue(foo)">
    {{result?.name}}
  </td>
  <td>
    {{result?.place}}
  </td>
</tr>

component.ts

passValue(foo) {
  this.value = foo;
  console.log(foo);
}

在控制台中，当我点击带有＆＃34; John＆＃34;的单元格时，我得到以下内容：作为其价值：

<td _ngcontent-pof-13="">
    John
</td>

理想情况下，控制台只会记录＆＃34; John＆＃34;而不是整个td元素。

或者可能有一种完全不同的更好的方法。

有什么想法吗？

Answer 1

<tr *ngFor="let result of Results$">
   <td #foo (click)="passValue(foo)">

#foo这里是template reference variable - 对DOM元素本身的引用。 result是对您绑定的数据的引用 - 在本例中，是一个名称字段值为“John”的对象：

所以，替换

<td #foo (click)="passValue(foo)">  // prints the td element 

by：

<td #foo (click)="passValue(result?.name)"> // prints "John"