2

我想要从父组件到子组件的双向绑定。这已经在我的一个组件中运行良好，如下所示（我发出了一些 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)]

4

2 回答 2

0

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

<input name="checkbox-input"  [ngModel]="mappedModel" (change)="test()" type="checkbox">
于 2019-03-24T08:56:06.087 回答
0

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

你可以试试这个：

<app-checkbox [(mappedModel)]="habit.goalActive = $event" ></app-checkbox>
于 2019-03-24T08:43:37.800 回答