Question

获取更改检测错误

检查后表情发生了变化。以前的价值：＆＃39; true＆＃39;。当前价值：＆＃39; false＆＃39;

所以我想手动运行另一轮变更检测。找到有关使用ApplicationRef.tick()但当前收到错误的信息

错误在[默认] C：\ development \ SolarUI11 \ src \ app \ update \ update.component.ts：8 ：11 类型的参数＆＃39; {selector：string;风格：任何[];模板：任何;提供者:( typeof ApplicationRef | typeof Date ...＆＃39;不能分配给＆＃39;类型的参数。组件＆＃39 ;. 财产类型及提供者＆＃39;是不相容的。键入＆＃39;（typeof ApplicationRef | typeof DatePipe）[]＆＃39;不能分配给类型＆＃39;提供[]＆＃39 ;. 键入ApplicationRef的类型typeof DatePipe＆＃39;不能分配类型＆＃39; 供应商＆＃39 ;. 输入类型为ApplicationRef＆＃39;不能分配给＆＃39;提供商＆＃39;。输入类型为ApplicationRef＆＃39;不能分配给＆＃39; FactoryProvide R＆＃39 ;. 物业＆＃39;提供＆＃39;类型＆＃39; typeof ApplicationRef＆＃39; .`
中缺少

我认为我只是坚持实现这一点的语法，我自己无法找到足够的信息才能使用它。

打字稿：

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;
  }
}

Answer 1

import { Component, Input, ChangeDetectorRef } from '@angular/core';

注入

constructor(private cdRef:ChangeDetectorRef) {}

并使用它

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

Answer 2

您是否尝试过使用ChangeDetectorRef？

constructor(private changeDetector: ChangeDetectorRef) {
}

用

检测变化

changeDetector.detectChanges();

Angular2使用ApplicationRef手动实现更改检测

2 个答案: