@Output from 指令将在父组件中打印但不能更新父组件中的值

Question

parent.component.html

  <div draggable (dragging)="copyDragging($event)">{{copyBoxDragging}}</div>

parent.component.ts

copyDragging(event) {
    console.log('copyDragging :', event); // good
    this.copyBoxDragging = event; // not reflected in html
}

draggable.directive

@Output() dragging = new EventEmitter();
mousedrag$.subscribe(() => {
    if (!this._dragging) {
        this.dragging.emit(true);
        this._dragging = true;
    }
});

问题

看到parent.component.ts中的console.log了吗？它总是正确打印预期值。但是在父组件（下一行）中分配一个值不会反映在父组件中 html

是否有什么东西阻止我在父组件中分配发出的值？

Answer 1

尝试强制更改检测

constructor(private ref: ChangeDetectorRef) {
}

copyDragging(event) {
    console.log('copyDragging :', event); // good
    this.copyBoxDragging = event; // not reflected in html

    this.ref.detectChanges();
}