Ekspresi ___ telah berubah setelah diperiksa

Mengapa komponen dalam plunk sederhana ini

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App {
  message:string = 'loading :(';

  ngAfterViewInit() {
    this.updateMessage();
  }

  updateMessage(){
    this.message = 'all done loading :)'
  }
}

pelemparan:

PENGECUALIAN: Ekspresi 'Saya {{message}} di App @ 0: 5' telah berubah setelah diperiksa. Nilai sebelumnya: 'Saya memuat :('. Nilai saat ini: 'Saya sudah selesai memuat :)' di [Saya {{message}} di App @ 0: 5]

ketika semua yang saya lakukan adalah memperbarui ikatan sederhana ketika pandangan saya dimulai?

Seperti yang dinyatakan oleh drewmoore, solusi yang tepat dalam hal ini adalah secara manual memicu deteksi perubahan untuk komponen saat ini. Ini dilakukan dengan menggunakan detectChanges()metode ChangeDetectorRefobjek (diimpor dari angular2/core), atau markForCheck()metode, yang juga membuat setiap komponen induk diperbarui. Contoh yang relevan :

import { Component, ChangeDetectorRef, AfterViewInit } from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App implements AfterViewInit {
  message: string = 'loading :(';

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.message = 'all done loading :)'
    this.cdr.detectChanges();
  }

}

Berikut juga Plunker yang menunjukkan pendekatan ngOnInit , setTimeout , dan enableProdMode untuk berjaga-jaga.

Pertama, perhatikan bahwa pengecualian ini hanya akan dibuang ketika Anda menjalankan aplikasi Anda dalam mode dev (yang merupakan kasus default pada beta-0): Jika Anda menelepon enableProdMode()saat bootstrap aplikasi, itu tidak akan dibuang ( lihat plunk yang diperbarui ).

Kedua, jangan lakukan itu karena pengecualian ini dilempar karena alasan yang baik: Singkatnya, ketika dalam mode dev, setiap putaran deteksi perubahan segera diikuti oleh putaran kedua yang memverifikasi bahwa tidak ada binding yang berubah sejak akhir yang pertama, karena ini akan menunjukkan bahwa perubahan disebabkan oleh perubahan deteksi itu sendiri.

Dalam plunk Anda, pengikatan {{message}}diubah oleh panggilan Anda ke setMessage(), yang terjadi di ngAfterViewInithook, yang terjadi sebagai bagian dari giliran deteksi perubahan awal. Itu sendiri tidak bermasalah - masalahnya adalah bahwa setMessage()perubahan mengikat tetapi tidak memicu putaran baru deteksi perubahan, yang berarti bahwa perubahan ini tidak akan terdeteksi sampai beberapa putaran deteksi perubahan berikutnya dipicu di tempat lain.

The takeaway: Apa pun yang mengubah kebutuhan mengikat untuk memicu putaran deteksi perubahan saat itu terjadi.

Perbarui sebagai respons terhadap semua permintaan untuk contoh cara melakukan itu : Solusi @ Tycho berfungsi, seperti yang ditunjukkan tiga metode dalam jawaban yang ditunjukkan @MarkRajcok. Tapi sejujurnya, mereka semua merasa jelek dan salah bagi saya, seperti jenis peretasan yang biasa kami gunakan di ng1.

Yang pasti, ada sesekali keadaan di mana hacks ini tepat, tetapi jika Anda menggunakan mereka pada sesuatu yang lebih dari yang sangat dasar sesekali, itu pertanda bahwa Anda berjuang kerangka bukan sepenuhnya merangkul alam reaktif.

IMHO, yang lebih idiomatik, "Angular2 way" untuk mendekati ini adalah sesuatu di sepanjang baris: ( plunk )

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message | async}} </div>`
})
export class App {
  message:Subject<string> = new BehaviorSubject('loading :(');

  ngAfterViewInit() {
    this.message.next('all done loading :)')
  }
}

ngAfterViewChecked() bekerja untuk saya:

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

constructor(private cdr: ChangeDetectorRef) { }
ngAfterViewChecked(){
   //your code to update the model
   this.cdr.detectChanges();
}

Saya memperbaikinya dengan menambahkan ChangeDetectionStrategy dari inti sudut.

import {  Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'page1',
  templateUrl: 'page1.html',
})

Tidak bisakah Anda menggunakan ngOnInitkarena Anda hanya mengubah variabel anggota message?

Jika Anda ingin mengakses referensi ke komponen anak @ViewChild(ChildComponent), Anda memang harus menunggu ngAfterViewInit.

Perbaikan kotor adalah memanggil updateMessage()loop acara berikutnya dengan misalnya setTimeout.

ngAfterViewInit() {
  setTimeout(() => {
    this.updateMessage();
  }, 1);
}

Untuk ini saya sudah mencoba jawaban di atas banyak yang tidak berfungsi dalam versi terbaru Angular (6 atau lebih baru)

Saya menggunakan kontrol Material yang memerlukan perubahan setelah pengikatan pertama dilakukan.

    export class AbcClass implements OnInit, AfterContentChecked{
        constructor(private ref: ChangeDetectorRef) {}
        ngOnInit(){
            // your tasks
        }
        ngAfterContentChecked() {
            this.ref.detectChanges();
        }
    }

Menambahkan jawaban saya, ini membantu beberapa orang memecahkan masalah tertentu.

Artikel Semua yang perlu Anda ketahui tentang ExpressionChangedAfterItHasBeenCheckedErrorkesalahan menjelaskan perilakunya dengan sangat rinci.

Masalah dengan pengaturan Anda adalah bahwa ngAfterViewInitkait siklus hidup dijalankan setelah deteksi perubahan diproses pembaruan DOM. Dan Anda secara efektif mengubah properti yang digunakan dalam templat di kait ini yang berarti bahwa DOM perlu dirender ulang:

  ngAfterViewInit() {
    this.message = 'all done loading :)'; // needs to be rendered the DOM
  }

dan ini akan membutuhkan siklus deteksi perubahan lain dan Angular by design hanya menjalankan satu siklus digest.

Anda pada dasarnya memiliki dua alternatif cara memperbaikinya:

• perbarui properti secara sinkron baik menggunakan setTimeout, Promise.thenatau asynchronous yang dapat diamati yang direferensikan dalam template

• lakukan pembaruan properti di sebuah kail sebelum pembaruan DOM - ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked.

Anda hanya perlu memperbarui pesan Anda di hook siklus hidup yang benar, dalam hal ini ngAfterContentCheckedbukanngAfterViewInit , karena di ngAfterViewInit cek untuk pesan variabel telah dimulai tetapi belum berakhir.

lihat: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview

jadi kodenya akan adil:

import { Component } from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App {
  message: string = 'loading :(';

  ngAfterContentChecked() {
     this.message = 'all done loading :)'
  }      
}

lihat demo kerja di Plunker.

Kesalahan ini terjadi karena nilai yang ada diperbarui segera setelah diinisialisasi. Jadi jika Anda akan memperbarui nilai baru setelah nilai yang ada diberikan di DOM, Maka itu akan berfungsi dengan baik. Seperti disebutkan dalam artikel ini Angular Debugging "Ekspresi telah berubah setelah diperiksa"

misalnya bisa kamu gunakan

ngOnInit() {
    setTimeout(() => {
      //code for your new value.
    });

}

atau

ngAfterViewInit() {
  this.paginator.page
      .pipe(
          startWith(null),
          delay(0),
          tap(() => this.dataSource.loadLessons(...))
      ).subscribe();
}

Seperti yang Anda lihat, saya belum menyebutkan waktu dalam metode setTimeout. Karena itu adalah API yang disediakan browser, bukan JavaScript API, Jadi ini akan berjalan secara terpisah di tumpukan browser dan akan menunggu sampai item tumpukan panggilan selesai.

Bagaimana konsep browser API envokes dijelaskan oleh Philip Roberts di salah satu video Youtube (What the hack is event loop?).

Anda juga dapat melakukan panggilan ke updateMessage () di Metode ngOnInt () - setidaknya berfungsi untuk saya

ngOnInit() {
    this.updateMessage();
}

Dalam RC1 ini tidak memicu pengecualian

Anda juga dapat membuat timer menggunakan Observable.timerfungsi rxjs , dan kemudian memperbarui pesan di langganan Anda:                    

Observable.timer(1).subscribe(()=> this.updateMessage());

Itu melempar kesalahan karena kode Anda diperbarui ketika ngAfterViewInit () dipanggil. Berarti nilai awal Anda berubah ketika ngAfterViewInit terjadi, Jika Anda memanggilnya di ngAfterContentInit () maka itu tidak akan menimbulkan kesalahan.

ngAfterContentInit() {
    this.updateMessage();
}

Saya tidak bisa mengomentari posting @Biranchi karena saya tidak punya reputasi yang cukup, tetapi itu memperbaiki masalah bagi saya.

Satu hal yang perlu diperhatikan! Jika menambahkan changeDetection: ChangeDetectionStrategy.OnPush pada komponen tidak berfungsi, dan komponen turunannya (komponen bodoh) coba menambahkannya ke induk juga.

Ini memperbaiki bug, tapi saya ingin tahu apa efek sampingnya.

Saya mendapat kesalahan serupa saat bekerja dengan datatable. Apa yang terjadi adalah ketika Anda menggunakan * ngFor di dalam yang lain * ngFor datatable membuang kesalahan ini karena ia mengganggu siklus perubahan sudut. SO daripada menggunakan datatable di dalam datatable, gunakan satu tabel biasa atau ganti mf.data dengan nama array. Ini berfungsi dengan baik.

Saya pikir solusi paling sederhana adalah sebagai berikut:

1. Buat satu implementasi untuk menetapkan nilai ke beberapa variabel yaitu melalui fungsi atau setter.
2. Buat variabel kelas (static working: boolean)di kelas di mana fungsi ini ada dan setiap kali Anda memanggil fungsi, cukup buat yang mana pun yang Anda suka. Dalam fungsi tersebut, jika nilai bekerja itu benar, maka langsung kembali tanpa melakukan apa-apa. lain, lakukan tugas yang Anda inginkan. Pastikan untuk mengubah variabel ini menjadi false setelah tugas selesai yaitu pada akhir baris kode atau dalam metode berlangganan ketika Anda selesai menetapkan nilai!