Угловые 2 привязки данных к не-вход

Question

Угловое 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); 
} 

В консоли я получаю следующее, когда я нажимаю на ячейки с "Джон" в качестве значения:

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

В идеале консоль будет просто записывать «Джон» вместо всего элемента td.

Возможно, существует совершенно другой и лучший способ сделать это.

Любые идеи?

Answer 1

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

#foo вот template reference variable - ссылка на сам элемент DOM. result является ссылкой на данные вы связывания - в этом случае, объект с именем поля со значением «Джон»:

Итак, замените

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

по:

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