انگولار - پیادهسازی دستی تشخیص تغییر در Angular2 با استفاده از ApplicationRef

دریافت خطای تشخیص تغییر

عبارت پس از بررسی تغییر کرده است. مقدار قبلی: 'true'. مقدار فعلی: 'false'

پس من میخواهم بهطور دستی یک دور دیگر از تشخیص تغییرات را اجرا کنم. اطلاعاتی درباره استفاده از ApplicationRef.tick() پیدا کردم اما در حال حاضر با خطا روبرو شدهام

خطا در [پیشفرض] C:\development\SolarUI11\src\app\update\update.component.ts:8:11 نوع آرگومان '{ selector: string; styles: any[]; template: any; providers: (typeof ApplicationRef | typeof Date...}' قابل اختصاص به پارامتر از نوع 'Component' نیست. نوع ویژگی 'providers' ناسازگار است. نوع '(typeof ApplicationRef | typeof DatePipe)[]' قابل اختصاص به نوع 'Provider[]' نیست. نوع 'typeof ApplicationRef | typeof DatePipe' قابل اختصاص به نوع 'Provider' نیست. نوع 'typeof ApplicationRef' قابل اختصاص به نوع 'Provider' نیست. نوع 'typeof ApplicationRef' قابل اختصاص به نوع 'FactoryProvider' نیست. ویژگی 'provide' در نوع '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();