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

【问题标题】：Is there a way to programmatically trigger the onchange event in Angular? (Typescript)有没有办法以编程方式触发 Angular 中的 onchange 事件？（打字稿）
【发布时间】：2019-04-05 19:37:47
【问题描述】：

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

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

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

我已经研究过用 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 输入字段。输入字段的更新触发 change 事件，onRecordUpdated 方法运行。

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

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

【问题讨论】：

How do I programmatically force an onchange event on an input?的可能重复
我不相信这是重复的，因为我试图在 Angular/Typescript 而不是 JS 中这样做
@ClayHess 我删除了我的答案，我注意到它不正确，因为subscribe 应该在没有任何明确操作的情况下触发更改检测。如果没有发生，则可能意味着您超出了某个区域。当您在 Angular 项目中使用不适合 Angular 的库时，通常会发生这种情况
克里斯蒂安...感谢您的更新。你能解释一下“使用不适用于 Angular 的库”是什么意思吗？
我尝试了不同的路线。我的应用程序中有 jQuery。所以我想我会使用 .val() 和 .change() 来触发计算。所以我输入了 $(selector).val(myValue).trigger('change');更改事件不会被触发。我不确定为什么。是因为我也在使用 ngModel 并且正在取代 jQuery 更改方法吗？

标签： angular

【解决方案1】：

那已经晚了，但是对于下一个会遇到这个问题的人：

从角核心获取 ChangeDetectorRef
调用detectChanges函数；


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

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

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

【讨论】：