Question

我想从父组件到子组件进行双向绑定。在我的其中一个组件中，它看起来已经如下所示（我发出了一些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，当我更改输入中的值时，它也会自动更改。现在，这是该组件无法正常工作的部分：

父母habit-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>();

现在在这种情况下，父组件中的值不会更新，我也不知道为什么，因为我做的基本相同。子组件中的值确实可以正确更新。

值得注意的一件事是，第一个示例（工作示例）中的子组件是第二个示例中的父组件->但这应该不是问题吗？

每当我按下一个按钮时，父容器的更新也将起作用（尽管它仍不会从复选框值中更新）：

父母habit-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);
 }

如果我将test-function添加到输入本身，则每当我按下它时都什么也没有发生（然后甚至不更新子组件中的mappingModel）

<label (click)="test()">{{mappedModel}}
   <input name="checkbox-input" [(ngModel)]="mappedModel" type="checkbox">

问题似乎是我不能正确地将habit.goalActive与子组件的事件发射器绑定（也许是因为它是对象的属性，而不是整个对象的属性？）但是我仍然很困惑，因为输入[[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无法正常工作

2 个答案: