我正在将对话框 (MatDialogRef) 中的值返回给输入标签。即使我正在更改输入标签的值，也不会触发更改事件。

我试过使用 dispatchEvent。我找到的所有文档和示例都显示了事件的创建和触发。我不想创建事件。

其他人在代码中显示回调。我无法在组件的 html View 更改中调用方法，而不会因缺少参数而出错。

我研究过使用 vanilla JS 和 TypeScript 来做到这一点。

// dialog box opens up clock-like interface to allow the end user to select a start and stop time

// I am using ViewChild to grab the DOM elements
// ViewChild to access startTime and stopTime DOM elements
  @ViewChild( 'startTime' ) elStartTime: ElementRef;
  @ViewChild( 'stopTime' ) elStopTime: ElementRef;

// This method runs when the ok button is clicked that closes the dialog
public calcHours (): void {
    // Variables to capture timeClock entries from DOM. Total variable to house calculation
    let currentStartTime = this.elStartTime.nativeElement.value;
    let currentStopTime = this.elStopTime.nativeElement.value;
    // Cast the returned time from string to number
    currentStartTime = +( currentStartTime.slice( 0, -( currentStartTime.indexOf( ':' ) + 1 ) ) );
    currentStopTime = +( currentStopTime.slice( 0, -( currentStopTime.indexOf( ':' ) + 1 ) ) );
    // Math to calculate the number of hours based upon the returned string time
    const totalHours = currentStopTime - currentStartTime;
    if ( currentStartTime !== '' && currentStopTime !== '' ) {
      this.dialogRef.close( totalHours );
    }
  }

// On the main component, I am using ViewChild to grab the input
// ViewChild to access hours worked DOM elements
  @ViewChild( 'hoursWorked' ) elHoursWorked: ElementRef;

// When the dialog closes, this method runs and changes the hoursWorked input
dialogRef.afterClosed().subscribe( result => {
      // Value returned from dialog box
      const dialogHoursCalc = `${ result }`;
      // Set value of input field from dialog box
      this.renderer.setProperty( this.elHoursWorked.nativeElement, 'value', dialogHoursCalc );
    } );

// My html template input tag is as follows...
<input class="form-control" type="number" step="0.01" data-number-to-fixed="2" placeholder="0.00"
                            (change)="onRecordUpdated(timeCard, timecarddet)" [(ngModel)]="timecarddet.hours" min="0"
                            max="365" #hoursWorked>

期望 - 最终用户打开带有类似时钟界面的对话框。他们选择开始和停止时间。他们单击确定按钮。对话框关闭并更新 hoursWorked 输入字段。输入字段的更新触发更改事件并运行 onRecordUpdated 方法。

实际 - 最终用户打开带有类似时钟界面的对话框。他们选择开始和停止时间。他们单击确定按钮。对话框关闭并更新 hoursWorked 输入字段。永远不会触发更改事件，并且永远不会运行 onRecordUpdated 方法。

如何触发更改事件并运行 onRecordUpdated 方法？

最佳答案

太晚了，但对于下一个遇到这个问题的人:

1. 从 Angular 核心获取 ChangeDetectorRef
2. 调用 detectChanges 函数；

import { ChangeDetectorRef } from '@angular/core';

export class FooComponent {
  constructor(
    private changeDetector: ChangeDetectorRef
  ) {}

  fooEvent(){
    this.changeDetector.detectChanges();
  }
}

关于angular - 有没有办法以编程方式触发 Angular 中的 onchange 事件？ ( typescript )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55542317/