Angular2 bằng tay thực hiện phát hiện sự thay đổi sử dụng ApplicationRef

Question

Bắt một lỗi phát hiện sự thay đổi

biểu đã thay đổi sau khi nó được kiểm tra. Giá trị trước đó: 'true'. Giá trị hiện tại: 'false'

vì vậy tôi muốn tự chạy một vòng phát hiện thay đổi khác. Tìm thấy thông tin về việc sử dụng ApplicationRef.tick() nhưng hiện tại nhận được lỗi

ERROR trong [default] C: \ phát triển \ SolarUI11 \ src \ ứng dụng \ update \ update.component.ts: 8 : 11 Đối số của loại '{selector : chuỗi; kiểu: bất kỳ []; template: any; các nhà cung cấp: ( typeof ApplicationRef | typeof Date ... 'không thể gán cho tham số loại' Component '. Các loại nhà cung cấp thuộc tính' không tương thích. Loại '(typeof ApplicationRef | typeof DatePipe) []' không có thể gán cho loại 'Nhà cung cấp []'. Loại 'loại ứng dụngRef | typeof DatePipe' không thể gán để nhập ' Nhà cung cấp'. Loại 'loại ApplicationRef' không thể gán cho loại 'Nhà cung cấp'. Nhập 'typeof ApplicationRef' không thể gán để nhập 'FactoryProvide r'. Thuộc tính 'cung cấp' bị thiếu trong loại 'ApplicationRef'.`

Tôi nghĩ rằng tôi chỉ bị mắc kẹt vào cú pháp thực hiện điều này, không thể tìm thấy đủ thông tin bản thân mình để có thể sử dụng nó.

nguyên cảo:

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

Tiêm

constructor(private cdRef:ChangeDetectorRef) {} 

và sử dụng nó

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

Answer 2

Bạn đã thử sử ChangeDetectorRef?

constructor(private changeDetector: ChangeDetectorRef) { 
} 

Và phát hiện những thay đổi với

changeDetector.detectChanges();