有没有办法在Angular中以编程方式触发onchange事件？ （打字稿）

Question

我正在从对话框（MatDialogRef）返回一个值到输入标签。即使我正在更改输入标签的值，更改事件也不会被触发。

我尝试使用dispatchEvent。我发现的所有文档和示例都显示了事件的创建然后触发。我不想创建该活动。

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

我已经看过使用香草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方法？

Answer 1

太晚了，但是对于下一个会有这个问题的人：

1. 从角铁芯获取ChangeDetectorRef
2. 调用detectChanges函数;

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

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

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