子組件的EventEmitter無法正常工作

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與子組件的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">