Angular 5 - Передача данных от родителя к компоненту посредством сервиса или вывода отправляет весь список

Question

Хорошо, здесь задействованы компоненты: компонент-список-назначений-кнопка-назначения-добавление-назначение-поповер

Мой родительский компонент отображает список назначений в NgFor и для каждой строки таблицыесть дочерний компонент add-assignment-button с событием click на нем.

Если по его щелчку мой родительский компонент передает все назначение (НЕ PLURAL) службе, на которую может подписаться add-assignment-popover.Проблема в том, что он отправляет весь список.Я не знаю, как сделать конкретное событие клика.Пробовал с индексом на каждой кнопке, но это ничего не делает.

РЕДАКТИРОВАТЬ: Я хочу уточнить две вещи.№ 1: я пытался с @Input в add-contact-popover, я получаю тот же результат.№ 2: Когда я говорю весь список, я имею в виду, что каждое назначение отправляется один за другим.Когда я консольный журнал (если у меня есть пять назначений в списке) будет пять консольных журналов (консольный журнал 1 имеет первое назначение и т. Д.) ..

Я хочу только назначение(1, ОДИН), принадлежащий строке, в которой я нажимаю кнопку.

Это родительский компонент (в интересах времени я покажу только соответствующие данные)

@Component({
selector: 'assignment-list',
template: `
    <tr *ngFor="let assignment of assignmentList">
            <td class="actions">
                <add-contact-button-component(click)="sendClickedRowDataToPopOver(assignment)"></add-contact-button-component>
                <add-assignment-contact-popover></add-assignment-contact-popover>
            </td>
    </tr>
`
})

export class AssignmentList implements OnInit {

  sendClickedRowDataToPopOver(assignment: AssignmentListItem) {
     this.tableRowDataService.sendAssignmentData(assignment);
   }
}

И это tablerowService

@Injectable()
export class TableRowDataService {
assignmentData = new EventEmitter<AssignmentListItem>();

sendAssignmentData(assignmentObject: AssignmentListItem) {
    this.assignmentData.emit(assignmentObject);
   }
}

Наконец, вот всплывающее окно

    ngOnInit() {
    this.resetValues();

    //Clickservice for knowing when createbutton is pushed.
    this.buttonClickService.showAddContactPopOver.subscribe((addContactCLick: boolean) => {
        if (addContactCLick) {

            this.tableRowDataService.assignmentData.subscribe(
                (assignmentObj: AssignmentListItem) => {
                    this.addValuesToPopover(assignmentObj);
                });
        }
    });
}

addValuesToPopover(assignmentObject: AssignmentListItem) {
    console.log('assignmentObject', assignmentObject);
}

Редактировать: вот кнопка контакта.

@Component({
selector: 'add-contact-button-component',
template: `
<a class="assignment-add-dependent-link lnk"
  title="add new contact"
  (click)="addButton()"
   [routerLink]="" 
  style="margin-right: 6px;">
   <i class="icon-plus blue"></i>
    <span>New Contact</span>
 </a>
`
 })

export class AddContactButtonComponent {

addClick = false;

constructor(private buttonClickService: ButtonClickService) { }

addButton() {
    this.addClick = !this.addClick;
    this.buttonClickService.showAddContactPopOver.next(this.addClick);
   }

}

Answer 1

Вы можете использовать @Input, @Output декораторы, которые созданы для обработки этого вида обмена данными и взаимодействия компонентов.

Ref: https://angular.io/guide/component-interaction

Answer 2

Вы не можете прикрепить событие щелчка к угловому компоненту.Вместо этого вы можете отправить объект в качестве входных данных для компонента.Из дочернего компонента вы можете вызывать службы, и вместо использования EventEmitter () вы должны использовать Subject.

В основном EventEmitter будет использоваться, если вы хотите обмениваться данными из дочернего компонента в родительский компонент.

https://stackblitz.com/edit/angular-ukupfj