javascript - 来自子组件的 EventEmitter 不起作用
问题描述
我想要从父组件到子组件的双向绑定。这已经在我的一个组件中运行良好,如下所示(我发出了一些 css 类和其他不相关的部分):
父 habit-show.component.html:
{{habit.label}}
<app-habit-edit [(habit)]="habit" ></app-habit-edit>
子组件 habit-edit.component.html:
<input id="habitName" name="label" [(ngModel)]="habit.label" required/>
子组件 habit-edit.component.ts:
@Input()
private habit: Habit ;
@Output()
habitChange = new EventEmitter<Habit>();
这按预期工作:我可以在父组件中看到 habit.label ,当我更改输入中的值时,它也会自动更改。现在这是不工作的组件部分:
父习惯-edit.component.html:
{{habit.goalActive}}
<app-checkbox [(mappedModel)]="habit.goalActive" ></app-checkbox>
子组件 checkbox.component.html:
{{mappedModel}}
<input name="checkbox-input" [(ngModel)]="mappedModel" type="checkbox">
子组件 checkbox.component.ts:
@Input()
private mappedModel: boolean;
@Output()
mappedModelChange = new EventEmitter<boolean>();
现在在这种情况下,父组件中的值不会更新,我不知道为什么,因为我做了基本相同的事情。子组件中的值确实会正确更新。
值得注意的一件事可能是,第一个(工作)示例中的子组件是第二个示例中的父组件-> 这应该不是问题,不是吗?
每当我按下该按钮时,当我添加一个按钮时,父容器的更新也会起作用(尽管它仍然不会从复选框值更新):
父习惯-edit.component.html:
{{habit.goalActive}}
<app-checkbox [(mappedModel)]="habit.goalActive" ></app-checkbox>
子组件 checkbox.component.html:
{{mappedModel}}
<input name="checkbox-input" [(ngModel)]="mappedModel" type="checkbox">
<button (click)="test()">Test</button>
子组件 checkbox.component.ts:
@Input()
private mappedModel: boolean;
@Output()
mappedModelChange = new EventEmitter<boolean>();
test(){
this.mappedModel = !this.mappedModel;
this.mappedModelChange.emit(this.mappedModel);
}
如果我将测试函数添加到输入本身,则无论何时按下它都不会发生任何事情(甚至子组件中的 mappedModel 都不会更新)
<label (click)="test()">{{mappedModel}}
<input name="checkbox-input" [(ngModel)]="mappedModel" type="checkbox">
问题似乎是我无法正确地将 habit.goalActive 与子组件中的事件发射器绑定(可能是因为它是对象的属性而不是整个对象?)我仍然很困惑,因为这没问题在输入上使用 [(ngModel)]
解决方案
在子组件的输入中添加更改事件并调用测试功能并删除 ngModel
<input name="checkbox-input" [ngModel]="mappedModel" (change)="test()" type="checkbox">
推荐阅读
- c++ - Possible compiler bug while reading file and outputting contents
- python - How to handle exception with executemany (MySQL and Python)
- android - how to intent from Fragmet to Fragment with his parent?
- javascript - How do you declare an array using an initializer list in javascript?
- python - How to create a word frequency plot using matplotlib or any other library
- html - Aligning div elements under each other
- performance - 缓存性能测试
- machine-learning - scikit-learn 的潜在狄利克雷分配中文档主题分布的最小值
- c# - 检查登录页面 c# 和 sql 的哈希密码
- sql-server - 按月、类型和类别分组 SQL Server