Angular2使用ApplicationRef手动执行更改检测

获取更改检测错误

表达式在选中后已更改。上一个值：“true”。当前值：“false”

所以我想手动运行另一轮更改检测。找到有关使用ApplicationRef.tick（）的信息，但当前出现错误

[default]C:\development\SolarUI11\src\app\update\update.component.ts中出现错误：8 :11 类型为{选择器：字符串；样式：任意[]；模板：任意；提供程序：( typeof ApplicationRef | typeof Date…“不可分配给类型的参数” 组件'。 属性“提供程序”的类型不兼容。 类型“（typeof ApplicationRef | typeof DatePipe）[]”不可分配给类型 “提供者[]”。 类型'typeof ApplicationRef | typeof DatePipe'不可分配给类型' 提供者'。 类型“typeof ApplicationRef”不可分配给类型“Provider”。 类型“typeof ApplicationRef”不可分配给类型“FactoryProvider” r’。 类型“typeof ApplicationRef”中缺少属性“Provider”`

我想我只是停留在实现这个的语法上，自己找不到足够的信息来使用它

打字稿：

import { Component, Input, ApplicationRef } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
import {DatePipe} from "@angular/common";
import { DataTable } from '../data/datatable';
import { DPS } from '../data/datainfo.ts';

@Component({
  selector: 'update-validation',
  styleUrls: ['../app.component.css'],
  templateUrl: 'update.component.html',
  providers: [DatePipe, ApplicationRef]
})
export class UpdateComponent {
  @Input() receivedRow:DataTable;
   public dt: NgbDateStruct;
   public dt2: NgbDateStruct;
   public startCheck: boolean = false;
   public endCheck: boolean = false;
   updateForm : FormGroup;

   constructor(fb: FormBuilder, private datePipe: DatePipe, private appref: ApplicationRef){
     this.updateForm = fb.group({
      'dataPoint' : [null, Validators.required],
      'ICCP' : [null, Validators.required],
      'startDate' : [null, Validators.required],
      'endDate' : [null, Validators.required]
      }, {validator: this.endDateAfterOrEqualValidator})
   }

 ngOnChanges(){
if(this.receivedRow){
  this.updateForm.controls['dataPoint'].setValue(this.receivedRow.tDataPoint);
  this.updateForm.controls['ICCP'].setValue(this.receivedRow.tICCP);
  this.updateForm.controls['startDate'].setValue(this.receivedRow.tStartDate);
  this.updateForm.controls['endDate'].setValue(this.receivedRow.tEndDate);
  }
}

  resetForm(){
    location.reload();
    //this.updateForm.reset();
  }

  submitForm(value: any, originalRow: any){
    var dataPointID = originalRow.receivedRow.tDataPoint;
    for (let entry in DPS) {
      if (DPS[entry].tDataPoint === dataPointID) {
        DPS[entry].tDataPoint = String((<HTMLInputElement>document.getElementById("dataPoint")).value);
        DPS[entry].tICCP = String((<HTMLInputElement>document.getElementById("ICCP")).value);
        DPS[entry].tStartDate = String((<HTMLInputElement>document.getElementById("startDate")).value);
        DPS[entry].tEndDate = String((<HTMLInputElement>document.getElementById("endDate")).value);
      }
    }
  }

  getStartDate(){
    var month = this.receivedRow.tStartDate.substring(0,2);
    var day = this.receivedRow.tStartDate.substring(3,5);
    var year = this.receivedRow.tStartDate.substring(6,10);
    var dateToUse = new Date(Number(year),Number(month)-1,Number(day));
    let timestamp = this['startDate'] != null ? new Date(this['startDate'].year, this['startDate'].month-1, this['startDate'].day).getTime() : dateToUse.getTime();
    this.updateForm.controls['startDate'].setValue(this.datePipe.transform(timestamp, 'MM/dd/yyyy'));
    this.appref.tick();
  }

  getEndDate(){
    var month = this.receivedRow.tEndDate.substring(0,2);
    var day = this.receivedRow.tEndDate.substring(3,5);
    var year = this.receivedRow.tEndDate.substring(6,10);
    var dateToUse = new Date(Number(year),Number(month)-1,Number(day));
    let timestamp = this['endDate'] != null ? new Date(this['endDate'].year, this['endDate'].month-1, this['endDate'].day).getTime() : dateToUse.getTime();
    this.updateForm.controls['endDate'].setValue(this.datePipe.transform(timestamp, 'MM/dd/yyyy'));
    this.appref.tick();
  }

  public showDatePick(selector):void {
     if(selector === 0) {
       this.startCheck = !this.startCheck
     } else {
       this.endCheck = !this.endCheck;
     }
  }

  endDateAfterOrEqualValidator(formGroup): any {
    var startDateTimestamp, endDateTimestamp;
    for(var controlName in formGroup.controls) {
      if (controlName.indexOf("startDate") !== -1) {
       startDateTimestamp = Date.parse(formGroup.controls[controlName].value);
      }
      if (controlName.indexOf("endDate") !== -1) {
        endDateTimestamp = Date.parse(formGroup.controls[controlName].value);
      }
    }
    return (endDateTimestamp < startDateTimestamp) ? { endDateLessThanStartDate: true } : null;
  }
}

从'@angular/core'导入{Component，Input，ApplicationRef}；
从'@angular/forms'导入{FormGroup，FormBuilder，Validators}；
从'@ng bootstrap/ng bootstrap'导入{NgbDateStruct}；
从“@angular/common”导入{DatePipe}”；
从“../data/DataTable”导入{DataTable}；
从“../data/datainfo.ts”导入{DPS}；
@组成部分({
选择器：“更新验证”，
样式URL:['../app.component.css']，
templateUrl:'update.component.html'，
提供者：[DatePipe，ApplicationRef]
})
导出类UpdateComponent{
@Input（）receivedRow:DataTable；
公共dt:NgbDateStruct；
公共dt2:NgbDateStruct；
public startCheck:boolean=false；
public-endCheck:boolean=false；
updateForm:FormGroup；
构造函数（fb:FormBuilder，私有日期管道：日期管道，私有appref:ApplicationRef）{
this.updateForm=fb.group({
'dataPoint'：[null，Validators.required]，
“ICCP”：[null，Validators.required]，
'startDate'：[null，Validators.required]，
“endDate”：[空，验证器。必需]
}，{validator:this.endDateAfterOrEqualValidator}）
}
ngOnChanges（）{
如果（此接收窗口）{
this.updateForm.controls['dataPoint'].setValue（this.receivedRow.tDataPoint）；
this.updateForm.controls['ICCP'].setValue（this.receivedRow.tICCP）；
this.updateForm.controls['startDate'].setValue（this.receivedRow.tStartDate）；
this.updateForm.controls['endDate'].setValue（this.receivedRow.tEndDate）；
}
}
重置表单（）{
location.reload（）；
//this.updateForm.reset（）；
}
submitForm（值：任意，原始行：任意）{
var DATAPOINT=originalRow.receivedRow.tDataPoint；
用于（让输入DPS）{
if（DPS[entry].tDataPoint===dataPointID）{
DPS[entry].tDataPoint=String（（document.getElementById（“dataPoint”））.value）；
DPS[entry].tICCP=String（（document.getElementById（“ICCP”））.value）；
DPS[entry].tStartDate=String（（document.getElementById（“startDate”））.value）；
DPS[entry].tEndDate=String（（document.getElementById（“endDate”））.value）；
}
}
}
getStartDate（）{
var月=此.receivedRow.tStartDate.substring（0,2）；
var day=此.receivedRow.tStartDate.substring（3,5）；
var year=本.receivedRow.tStartDate.substring（6,10）；
var dateToUse=新日期（数字（年）、数字（月）-1、数字（日））；
让timestamp=this['startDate']！=null？新日期（this['startDate'].year，this['startDate'].month-1，this['startDate'].day）。getTime（）：dateuse.getTime（）；
this.updateForm.controls['startDate'].setValue（this.datePipe.transform（时间戳'MM/dd/yyyy'））；
this.appref.tick（）；
}
getEndDate（）{
var月=此.receivedRow.tEndDate.substring（0,2）；
var day=此.receivedRow.tEndDate.substring（3,5）；
var year=本.收款日期.子字符串（6,10）；
var dateToUse=新日期（数字（年）、数字（月）-1、数字（日））；
让timestamp=this['endDate']！=null？新日期（this['endDate'].year，this['endDate'].month-1，this['endDate'].day）。getTime（）：dateToUse.getTime（）；
this.updateForm.controls['endDate'].setValue（this.datePipe.transform（时间戳'MM/dd/yyyy'））；
this.appref.tick（）；
}
公共showDatePick（选择器）：无效{
如果（选择器==0）{
this.startCheck=！this.startCheck
}否则{
this.endCheck=！this.endCheck；
}
}
endDateAfterOrEqualValidator（formGroup）：任何{
var startDateTimestamp，endDateTimestamp；
for（formGroup.controls中的变量controlName）{
if（controlName.indexOf（“startDate”）！=-1）{
startDateTimestamp=Date.parse（formGroup.controls[controlName].value）；
}
if（controlName.indexOf（“endDate”）！=-1）{
endDateTimestamp=Date.parse（formGroup.controls[controlName].value）；
}
}
返回（endDateTimestamp

注入

constructor(private cdRef:ChangeDetectorRef) {}

并使用它

public showDatePick(selector):void {
  if(selector === 0) {
    this.startCheck = !this.startCheck
  } else {
    this.endCheck = !this.endCheck;
  }
  this.cdRef.detectChanges();
}

你试过使用吗

并使用

changeDetector.detectChanges();

---

这实际上修复了第二个错误，而不是第一个错误。我是简单地将

private-cdRef:ChangeDetectorRef

插入到我现有的讲师中，还是包含了某种

inject

语法？也许你需要添加

this.cdRef.detectChanges（）

在其他地方也有。您的问题包含太多代码。我没有进行充分调查。您没有解释我们为什么不使用ApplicationRef。它现在过时了吗？

ApplicationRef.tick（）

在某种程度上类似，但对整个应用程序运行更改检测。如果这不是必需的，最好避免它。如果组件配置了

ChangeDetectionStrategy.OnPush

，

ApplicationRef.tick（）

仍将跳过此组件

constructor(private changeDetector: ChangeDetectorRef) {
}

changeDetector.detectChanges();