子组件的 EventEmitter 不工作

Question

我想要从父组件到子组件的双向绑定。这已经在我的一个组件中运行良好，如下所示（我发出了一些 css-类和其他不相关的部分）：

家长习惯-show.component.html:

{{habit.label}}
<app-habit-edit [(habit)]="habit" ></app-habit-edit>

子组件习惯-edit.component.html:

<input id="habitName" name="label" [(ngModel)]="habit.label" required/>

子组件习惯-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 与子组件的 eventemitter 正确绑定（可能是因为它是一个对象的属性而不是整个对象？）不过我仍然很困惑，因为输入

上的 [(ngModel)] 没有问题

Answer 1

我认为您没有使用您的活动。它在第一个示例中起作用，因为您在父对象和子对象中使用相同的对象。

你能试试这个吗:

<app-checkbox [(mappedModel)]="habit.goalActive = $event" ></app-checkbox>

Answer 2

在子组件的输入中添加更改事件并调用测试函数并删除 ngModel

<input name="checkbox-input"  [ngModel]="mappedModel" (change)="test()" type="checkbox">

子组件的 EventEmitter 不工作

EventEmitter from Subcomponent not working

javascript

angular

eventemitter

two-way-binding

subcomponent