angular - 事件发射器:模板对发射的事件没有反应
问题描述
我有一个发出事件的子组件
@Output() setAdditionalCodeValue: EventEmitter<any> = new EventEmitter();
HTML是
<mat-row *matRowDef="let row; columns: displayedColumns;" class="my-mat-cell" (click)="setAdditionalCodeValue.emit(row)">
</mat-row>
然后我的父 HTML 绑定到 setAdditionalCodeValue
<ng-container matColumnDef="additionalCode">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Additional Code</th>
<td mat-cell *matCellDef="let element" class="grandParent" >
<mat-form-field class="type" let="i = index">
<input matInput (keyup)="toggleLookup($event, element)" (setAdditionalCodeValue)="updateAdditionalCodeHandler(element)" [(ngModel)]="countryLookupInput" autocomplete="off" (keydown.ArrowDown)="onDown()">
</mat-form-field>
<div *ngIf="element.expanded" class="parent">
<app-lookup-popup class="child" (closeLookup)="closeLookupHandler(element)" ></app-lookup-popup>
</div>
</td>
</ng-container>
父组件看起来像
updateAdditionalCodeHandler(evt) {
console.log('Update Addition Code event received: ' + evt);
this.countryLookupInput = evt;
}
updateAdditionalCodeHandler 没有被击中,因为没有任何内容写入控制台开始。
我的最终目标是'countryLookupInput'
使用子项的“行”参数发出的值更新属性。
奇怪的'(closeLookup)="closeLookupHandler(element)"'
是,它以同样的方式连接起来,去看看吧!
解决方案
问题出在以下元素中:
<app-lookup-popup class="child" (closeLookup)="closeLookupHandler(element)" ></app-lookup-popup>
修改后的代码
<app-lookup-popup class="child" (closeLookup)="closeLookupHandler(element)" (setAdditionalCodeValue)="updateAdditionalCodeHandler(element)" ></app-lookup-popup>
和其他组件
<input matInput (keyup)="toggleLookup($event, element)"[(ngModel)]="countryLookupInput" autocomplete="off" (keydown.ArrowDown)="onDown()">
如果这是发出事件的组件
推荐阅读
- java - 如何在重复 n 次的 OR 构造中强制匹配不同的字符串
- graphql - 如何在 @default 指令中创建计算值
- go - 在 Golang 中实现 tcp 状态服务器的正确方法
- hbase - 如何将 HBase 表从 HDFS 存储移动到 BLOB 存储(以及如何检查存储)
- java - 如何在 JAVA 中访问 java.lang.Object json 值?
- python - 如何在python中比较日期和时间?
- php - 如何使用php在带空格或不带空格的字符串中打印最大重复单词?
- r - R中的通道归一化运算符
- assembly - 用汇编语言检测AES代码参数
- node.js - Heroku nodejs ssl