使用 EventEmitter 角度发射一个值答案

【问题标题】：Emit one value with EventEmitter angular使用 EventEmitter 角度发射一个值
【发布时间】：2020-08-25 01:54:24
【问题描述】：

我有四个产品值（A、B、C、D）（在标签之间）。我创建了一个有角度的子组件，我想在用户单击时使用 EventEmitter.emit 将一个好的值（A 或 B 或 Cor D）传递给父组件，但我不能。我总是发送第一个值 A。这是我的角码

component.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>

在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);
}

在父component.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
}

有什么想法吗？

【问题讨论】：

当 getName() 触发时，本地子控制台中会出现哪些值（而不是在发出后）？请检查并告知。

标签： angular

【解决方案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>

希望对你有帮助！

【讨论】：

【解决方案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>

【讨论】：