使用EventEmitter angular发出一个值
使用EventEmitter angular发出一个值
提问于 2020-05-09 21:11:56
我有四个值的产品(A，B，C，D) (在一个标签之间)。我创建了一个子组件angular，我想在用户单击时用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>在component.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
}有什么想法吗？
回答 2
Stack Overflow用户
发布于 2020-05-09 21:20:52
您对所有对象都使用了相同的选择器#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>希望它能帮上忙！
Stack Overflow用户
发布于 2020-05-09 21:46:23
如果您可以在控制器中调整数据结构，那么如果您只打算在事件处理程序中自引用模板引用变量，我就不认为需要它了。
只需对变量稍作更改，即可实现相同的行为。请尝试以下操作
控制器
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61697266
复制相关文章
相似问题
腾讯云开发者
