Angular2 使用 ApplicationRef 手动实现变更检测
Angular2 manually implement change detection using ApplicationRef
获取变更检测错误
Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'
所以我想手动 运行 另一轮变化检测。找到有关使用 ApplicationRef.tick()
但当前出现错误
的信息
ERROR in [default] C:\development\SolarUI11\src\app\update\update.component.ts:8
:11
Argument of type '{ selector: string; styles: any[]; template: any; providers: (
typeof ApplicationRef | typeof Date...' is not assignable to parameter of type '
Component'.
Types of property 'providers' are incompatible.
Type '(typeof ApplicationRef | typeof DatePipe)[]' is not assignable to type
'Provider[]'.
Type 'typeof ApplicationRef | typeof DatePipe' is not assignable to type '
Provider'.
Type 'typeof ApplicationRef' is not assignable to type 'Provider'.
Type 'typeof ApplicationRef' is not assignable to type 'FactoryProvide
r'.
Property 'provide' is missing in type 'typeof ApplicationRef'.`
我想我只是停留在实现它的语法上,我自己找不到足够的信息来使用它。
打字稿:
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;
}
}
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();
}
您尝试过使用 ChangeDetectorRef 吗?
constructor(private changeDetector: ChangeDetectorRef) {
}
并使用
检测变化
changeDetector.detectChanges();
获取变更检测错误
Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'
所以我想手动 运行 另一轮变化检测。找到有关使用 ApplicationRef.tick()
但当前出现错误
ERROR in [default] C:\development\SolarUI11\src\app\update\update.component.ts:8 :11 Argument of type '{ selector: string; styles: any[]; template: any; providers: ( typeof ApplicationRef | typeof Date...' is not assignable to parameter of type ' Component'. Types of property 'providers' are incompatible. Type '(typeof ApplicationRef | typeof DatePipe)[]' is not assignable to type 'Provider[]'. Type 'typeof ApplicationRef | typeof DatePipe' is not assignable to type ' Provider'. Type 'typeof ApplicationRef' is not assignable to type 'Provider'. Type 'typeof ApplicationRef' is not assignable to type 'FactoryProvide r'. Property 'provide' is missing in type 'typeof ApplicationRef'.`
我想我只是停留在实现它的语法上,我自己找不到足够的信息来使用它。
打字稿:
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;
}
}
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();
}
您尝试过使用 ChangeDetectorRef 吗?
constructor(private changeDetector: ChangeDetectorRef) {
}
并使用
检测变化changeDetector.detectChanges();