Назначьте значение переменной из другого компонента в * ngFor, щелкнув в angular 2

Я пытаюсь в *ngFor передать объект другому компоненту, но передал только последний объект в таблице, но должен отображаться объект, по которому щелкнули, как решить эту проблему?

  <tr data-toggle="control-sidebar" *ngFor="let user of pagedItems">
      <td><control-sidebar [user]="user">
  </control-sidebar>{{ user.name }}</td>

а в другом компонентном представлении отображается только последняя строка таблицы.


angular input pass-data ngfor selector
person llotall    schedule 29.06.2017    source источник
comment
почему вы передаете userDetails вместо объекта user?   -  person Abrar    schedule 29.06.2017
comment
См. этот пример. Он показывает, как передать щелкнутый объект из цикла *ngFor другому компоненту. angular.io/generated/live-examples/toh-pt3/eplnkr. html   -  person Nehal    schedule 29.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы привязываете данные user к control-sidebar:

[user]="userDtails", проблема здесь.

Измените код:

<tr data-toggle="control-sidebar" *ngFor="let user of pagedItems">
      <td (click)="getUser(user)"><control-sidebar [user]="user">
  </control-sidebar>{{ user.name }}</td>

Убедитесь, что вы определили метод getUser в своем классе компонента.

Обратите внимание, что я установил: [user]="user". Поскольку вы хотите передать объект user в control-sidebar.

Теперь все должно работать нормально.

ИЗМЕНИТЬ :

Поскольку вы хотите отобразить user, по которому щелкнули, вы можете привязать метод к обработчику (click) и передать объект user. Например:

(click)="showUser(user)"
person Abrar    schedule 29.06.2017
comment
ой, извините, я ошибся, когда писал пост. Я исправил это. В моем коде была такая же привязка, и я получил результат, описанный выше. - person llotall; 29.06.2017
comment
Вам нужен объект user после нажатия на td, верно? - person Abrar; 29.06.2017
comment
может быть, это не работает, потому что я использую таблицу, вставленную li, как в вашем примере? - person llotall; 29.06.2017
comment
Обработчики кликов работают для td. Отредактированный ответ. Он должен работать нормально. - person Abrar; 29.06.2017
comment
Я был невнимателен и забыл об операторе elvis в компоненте, ваш пример мне помог! Спасибо!! - person llotall; 29.06.2017