Bagaimana mengelola Angular2 "ekspresi telah berubah setelah diperiksa" pengecualian ketika properti komponen tergantung pada datetime saat ini

Komponen saya memiliki gaya yang bergantung pada datetime saat ini. Dalam komponen saya, saya punya fungsi berikut.

  private fontColor( dto : Dto ) : string {
    // date d'exécution du dto
    let dtoDate : Date = new Date( dto.LastExecution );

    (...)

    let color =  "hsl( " + hue + ", 80%, " + (maxLigness - lightnessAmp) + "%)";

    return color;
  }

lightnessAmpdihitung dari datetime saat ini. Warnanya berubah jika dtoDatedalam 24 jam terakhir.

Kesalahan yang tepat adalah sebagai berikut:

Ekspresi telah berubah setelah diperiksa. Nilai sebelumnya: 'hsl (123, 80%, 49%)'. Nilai sekarang: 'hsl (123, 80%, 48%)'

Saya tahu pengecualian muncul dalam mode pengembangan hanya saat nilai diperiksa. Jika nilai yang dicentang berbeda dari nilai yang diperbarui, pengecualian dilemparkan.

Jadi saya mencoba memperbarui datetime saat ini di setiap siklus hidup dalam metode kait berikut untuk mencegah pengecualian:

  ngAfterViewChecked()
  {
    console.log( "! changement de la date du composant !" );
    this.dateNow = new Date();
  }

... tetapi tanpa hasil.

Jalankan deteksi perubahan secara eksplisit setelah perubahan:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef:ChangeDetectorRef) {}

ngAfterViewChecked()
{
  console.log( "! changement de la date du composant !" );
  this.dateNow = new Date();
  this.cdRef.detectChanges();
}

TL; DR

ngAfterViewInit() {
    setTimeout(() => {
        this.dateNow = new Date();
    });
}

Meskipun ini merupakan solusi, kadang-kadang sangat sulit untuk menyelesaikan masalah ini dengan cara yang lebih baik, jadi jangan salahkan diri Anda jika Anda menggunakan pendekatan ini. Tidak apa-apa.

Contoh : Masalah awal [ tautan ], Diselesaikan dengan setTimeout()[ tautan ]

Bagaimana cara menghindarinya

Secara umum kesalahan ini biasanya terjadi setelah Anda menambahkan suatu tempat (bahkan dalam komponen induk / anak) ngAfterViewInit. Jadi pertanyaan pertama adalah bertanya pada diri sendiri - dapatkah saya hidup tanpanya ngAfterViewInit? Mungkin Anda memindahkan kode di suatu tempat ( ngAfterViewCheckedmungkin menjadi alternatif).

Contoh : [ tautan ]

Juga

Juga hal-hal async ngAfterViewInityang mempengaruhi DOM dapat menyebabkan ini. Juga dapat diselesaikan melalui setTimeoutatau dengan menambahkan delay(0)operator di dalam pipa:

ngAfterViewInit() {
  this.foo$
    .pipe(delay(0)) //"delay" here is an alternative to setTimeout()
    .subscribe();
}

Contoh : [ tautan ]

Bacaan yang bagus

Artikel bagus tentang cara men-debug ini dan mengapa itu terjadi: tautan

Seperti yang disebutkan oleh @leocaseiro tentang masalah github .

Saya menemukan 3 solusi untuk mereka yang mencari perbaikan mudah.

1) Pindah dari ngAfterViewInitkengAfterContentInit

2) Pindah ke ngAfterViewCheckeddigabungkan dengan ChangeDetectorRefseperti yang disarankan pada # 14748 (komentar)

3) Tetap menggunakan ngOnInit () tetapi panggil ChangeDetectorRef.detectChanges()setelah perubahan Anda.

Dia Anda pergi dua solusi!

1. Ubah ChangeDetectionStrategy ke OnPush

Untuk solusi ini, Anda pada dasarnya memberi tahu sudut:

Berhenti memeriksa perubahan; Saya akan melakukannya hanya jika saya tahu itu perlu

Perbaikan cepat:

Ubah komponen Anda sehingga akan digunakan ChangeDetectionStrategy.OnPush

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent implements OnInit {
    // ...
}

Dengan ini, semuanya sepertinya tidak berfungsi lagi. Itu karena mulai sekarang Anda harus membuat panggilan Angular detectChanges()secara manual.

this.cdr.detectChanges();

Berikut ini tautan yang membantu saya memahami ChangeDetectionStrategy benar: https://alligator.io/angular/change-detection-strategy/

2. Memahami Ekspresi yang DiubahSetelahMemilikiBeenTidak Teror

Berikut ini adalah ekstrak kecil dari jawaban tomonari_t tentang penyebab kesalahan ini, saya hanya mencoba memasukkan bagian-bagian yang membantu saya untuk memahami hal ini.

Artikel lengkap menunjukkan contoh kode nyata tentang setiap titik yang ditampilkan di sini.

Penyebab dasarnya adalah siklus hidup sudut:

Setelah setiap operasi, Angular ingat nilai apa yang digunakannya untuk melakukan operasi. Mereka disimpan di properti oldValues ​​dari tampilan komponen.

Setelah pemeriksaan dilakukan untuk semua komponen, Angular kemudian memulai siklus intisari berikutnya, tetapi alih-alih melakukan operasi, ia membandingkan nilai saat ini dengan yang ia ingat dari siklus intisari sebelumnya.

Operasi berikut sedang diperiksa pada siklus digest:

periksa bahwa nilai yang diturunkan ke komponen turunan sama dengan nilai yang akan digunakan untuk memperbarui properti komponen ini sekarang.

periksa bahwa nilai yang digunakan untuk memperbarui elemen DOM sama dengan nilai yang akan digunakan untuk memperbarui elemen ini sekarang melakukan hal yang sama.

memeriksa semua komponen anak

Jadi, kesalahan dilemparkan ketika nilai yang dibandingkan berbeda. , blogger Max Koretskyi menyatakan:

Pelakunya selalu merupakan komponen anak atau arahan.

Dan akhirnya, inilah beberapa contoh dunia nyata yang biasanya menyebabkan kesalahan ini:

• Layanan berbagi
• Siaran acara sinkron
• Instansiasi komponen dinamis

Setiap sampel dapat ditemukan di sini (plunkr), dalam kasus saya masalahnya adalah instantiasi komponen dinamis.

Juga, berdasarkan pengalaman saya sendiri, saya sangat menyarankan semua orang untuk menghindari setTimeoutsolusi, dalam kasus saya menyebabkan loop "hampir" tak terbatas (21 panggilan yang saya tidak mau tunjukkan kepada Anda bagaimana memprovokasi mereka),

Saya akan merekomendasikan untuk selalu mengingat siklus hidup Angular sehingga Anda dapat memperhitungkan bagaimana mereka akan terpengaruh setiap kali Anda mengubah nilai komponen lain. Dengan kesalahan ini, Angular memberi tahu Anda:

Anda mungkin melakukan ini dengan cara yang salah, apakah Anda yakin Anda benar?

Blog yang sama juga mengatakan:

Seringkali, perbaikannya adalah dengan menggunakan kait deteksi perubahan yang tepat untuk membuat komponen dinamis

Panduan singkat bagi saya adalah untuk mempertimbangkan setidaknya dua hal berikut ini saat coding ( saya akan mencoba melengkapinya dari waktu ke waktu ):

1. Hindari mengubah nilai komponen induk dari komponen turunannya, sebagai gantinya: modifikasi dari induknya.
2. Ketika Anda menggunakan @Inputdan @Outputarahan, cobalah untuk menghindari memicu perubahan siklus lyf kecuali komponen sepenuhnya diinisialisasi.
3. Hindari panggilan yang tidak perlu this.cdr.detectChanges();karena dapat memicu lebih banyak kesalahan, khususnya ketika Anda berurusan dengan banyak data dinamis
4. Ketika penggunaan this.cdr.detectChanges();wajib, pastikan bahwa variabel ( @Input, @Output, etc) yang digunakan diisi / diinisialisasi pada kait deteksi kanan ( OnInit, OnChanges, AfterView, etc)
5. Jika memungkinkan, hapus alih-alih sembunyikan , ini terkait dengan poin 3 dan 4.

Juga

Jika Anda ingin sepenuhnya memahami Angular Life Hook, saya sarankan Anda untuk membaca dokumentasi resmi di sini:

• https://angular.io/guide/lifecycle-hooks

Dalam kasus kami, kami TETAP dengan menambahkan changeDetection ke dalam komponen dan memanggil detectChanges () di ngAfterContentChecked, kode sebagai berikut

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SpinnerComponent implements OnInit, OnDestroy, AfterContentChecked {

  show = false;

  private subscription: Subscription;

  constructor(private spinnerService: SpinnerService, private changeDedectionRef: ChangeDetectorRef) { }

  ngOnInit() {
    this.subscription = this.spinnerService.spinnerState
      .subscribe((state: SpinnerState) => {
        this.show = state.show;
      });
  }

  ngAfterContentChecked(): void {
      this.changeDedectionRef.detectChanges();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

Saya pikir solusi terbaik dan terbersih yang dapat Anda bayangkan adalah ini:

@Component( {
  selector: 'app-my-component',
  template: `<p>{{ myData?.anyfield }}</p>`,
  styles: [ '' ]
} )
export class MyComponent implements OnInit {
  private myData;

  constructor( private myService: MyService ) { }

  ngOnInit( ) {
    /* 
      async .. await 
      clears the ExpressionChangedAfterItHasBeenCheckedError exception.
    */
    this.myService.myObservable.subscribe(
      async (data) => { this.myData = await data }
    );
  }
}

Diuji dengan Angular 5.2.9

Pekerjaan kecil di sekitar saya digunakan berkali-kali

Promise.resolve(null).then(() => {
    console.log( "! changement de la date du composant !" );
    this.dateNow = new Date();
    this.cdRef.detectChanges();
});

Saya terutama mengganti "null" dengan beberapa variabel yang saya gunakan di controller.

Meskipun sudah ada banyak jawaban dan tautan ke artikel yang sangat bagus tentang deteksi perubahan, saya ingin memberikan dua sen saya di sini. Saya pikir cek ada karena suatu alasan jadi saya berpikir tentang arsitektur aplikasi saya dan menyadari bahwa perubahan dalam tampilan dapat ditangani dengan menggunakan BehaviourSubjectdan kait siklus hidup yang benar. Jadi inilah yang saya lakukan untuk solusi.

• Saya menggunakan komponen pihak ketiga ( kalender penuh) , tetapi saya juga menggunakan Bahan Angular , jadi meskipun saya membuat plugin baru untuk penataan, mendapatkan tampilan dan nuansa agak canggung karena kustomisasi tajuk kalender tidak dapat dilakukan tanpa mengotori repo. dan bergulir sendiri.

• Jadi saya akhirnya mendapatkan kelas JavaScript yang mendasarinya, dan perlu menginisialisasi header kalender saya sendiri untuk komponen. Itu mengharuskan ViewChilduntuk dirender sebelum orang tua saya diberikan, yang bukan cara Angular bekerja. Inilah mengapa saya membungkus nilai yang saya butuhkan untuk template saya di BehaviourSubject<View>(null):

  calendarView$ = new BehaviorSubject<View>(null);

Selanjutnya, ketika saya bisa memastikan tampilan dicentang, saya memperbarui subjek itu dengan nilai dari @ViewChild:

  ngAfterViewInit(): void {
    // ViewChild is available here, so get the JS API
    this.calendarApi = this.calendar.getApi();
  }

  ngAfterViewChecked(): void {
    // The view has been checked and I know that the View object from
    // fullcalendar is available, so emit it.
    this.calendarView$.next(this.calendarApi.view);
  }

Kemudian, dalam templat saya, saya hanya menggunakan asyncpipa. Tidak ada peretasan dengan deteksi perubahan, tidak ada kesalahan, bekerja dengan lancar.

Harap jangan ragu untuk bertanya apakah Anda membutuhkan detail lebih lanjut.

Gunakan nilai formulir default untuk menghindari kesalahan.

Alih-alih menggunakan jawaban yang diterima dari menerapkan detectChanges () di ngAfterViewInit () (yang juga memecahkan kesalahan dalam kasus saya), saya malah memutuskan untuk menyimpan nilai default untuk bidang formulir yang diperlukan secara dinamis, sehingga ketika formulir tersebut kemudian diperbarui, validitasnya tidak berubah jika pengguna memutuskan untuk mengubah opsi pada formulir yang akan memicu bidang yang diperlukan baru (dan menyebabkan tombol kirim dinonaktifkan).

Ini menyimpan sedikit kode dalam komponen saya, dan dalam kasus saya kesalahannya dihindari sama sekali.

Saya mendapatkan kesalahan itu karena saya mendeklarasikan variabel dan kemudian ingin
mengubah nilainya menggunakanngAfterViewInit

export class SomeComponent {

    header: string;

}

untuk memperbaikinya saya beralih dari

ngAfterViewInit() { 

    // change variable value here...
}

untuk

ngAfterContentInit() {

    // change variable value here...
}