Вывести одно значение с помощью EventEmitter angular

Question

У меня четыре значения продуктов (A, B, C, D) (между тегом). Я создаю дочерний компонент angular и хочу передать хорошее значение (A или B или Cor D) родительскому компоненту с помощью EventEmitter.emit, когда пользователь щелкает, но я не могу. Я всегда отправляю первое значение A. Это мой angular код

компонент. html

<table>
   <thead>
      <th><a #ca [attr.data-cat]="alax" (click)="getName(ca.dataset.cat)">A</a></th>
      <th><a #ca [attr.data-cat]="beter" (click)="getName(ca.dataset.cat)">B</a></th>
      <th><a #ca [attr.data-cat]="colar" (click)="getName(ca.dataset.cat)">C</a></th>
      <th><a #ca [attr.data-cat]="dera" (click)="getName(ca.dataset.cat)">D</a></th>
   </thead>
</table>

In component.ts

alax= 'ARMOIRS';
beter= 'PARASOLS';
colar= 'CAMBOUS';
dera= 'DIAMBRE';

 @Output()
 sendRequestData = new EventEmitter(); 

 getName(catName:string) {
  console.log("catName nom : "+catName);
  this.sendRequestData.emit(catName);
}

В Отцовский компонент. html У меня есть:

<app-chilComponent (sendRequestData)="treatment($event)"></app-childComponent>

В отцовском компоненте .ts

treatment(message: any){
 console.log(message) // I have always 'ARMOIRS' when I click on A or B or C or D
                      // I want to have 'ARMOIS' when I click on A and 'PARASOLS' when i click on B
}

Есть идеи?

Answer 1

Вы использовали один и тот же селектор #ca для всех. Поменяйте их

<table>
   <thead>
      <th><a #ca1 [attr.data-cat]="alax" (click)="getName(ca1.dataset.cat)">A</a></th>
      <th><a #ca2 [attr.data-cat]="beter" (click)="getName(ca2.dataset.cat)">B</a></th>
      <th><a #ca3 [attr.data-cat]="colar" (click)="getName(ca3.dataset.cat)">C</a></th>
      <th><a #ca4 [attr.data-cat]="dera" (click)="getName(ca4.dataset.cat)">D</a></th>
   </thead>
</table>

Надеюсь, это поможет!

Answer 2

Если вы можете настроить структуру данных в контроллере, я не вижу необходимости в ссылочной переменной шаблона, если вы собираетесь ссылаться только на нее в обработчике событий.

Вы могли бы добиться то же поведение с незначительным изменением переменных. Попробуйте следующий

Контроллер

data = [
  { category: { name: 'ARMOIRS', value: 'alax' }, label: 'A' },
  { category: { name: 'PARASOLS', value: 'beter' }, label: 'B' },
  { category: { name: 'CAMBOUS', value: 'colar' }, label: 'C' },
  { category: { name: 'DIAMBRE', value: 'dera' }, label: 'D' },
];

getName(categoryName: string) {
  console.log(categoryName);
  this.sendRequestData.emit(catName);
}

Шаблон

<table>
  <thead>
    <th *ngFor="let item of data">
      <a (mouseup)="getName(item.category.name)">{{ item.label }}</a>
    </th>
  </thead>
</table>