Biểu thức ___ đã thay đổi sau khi được kiểm tra

Tại sao thành phần trong plunk đơn giản này

@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 :)'
  }
}

ném:

NGOẠI TRỪ: Biểu thức 'Tôi {{message}} trong Ứng dụng @ 0: 5' đã thay đổi sau khi được kiểm tra. Giá trị trước: 'Tôi đang tải :('. Giá trị hiện tại: 'Tôi đã tải xong :)' trong [Tôi {{message}} trong Ứng dụng @ 0: 5]

khi tất cả những gì tôi đang làm là cập nhật một ràng buộc đơn giản khi chế độ xem của tôi được bắt đầu?

Như đã nêu của drewmoore, giải pháp thích hợp trong trường hợp này là kích hoạt thủ công phát hiện thay đổi cho thành phần hiện tại. Điều này được thực hiện bằng cách sử dụng detectChanges()phương thức của ChangeDetectorRefđối tượng (được nhập từ angular2/core) hoặc markForCheck()phương thức của nó , cũng làm cho bất kỳ thành phần cha mẹ nào được cập nhật. Ví dụ liên quan :

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();
  }

}

Đây cũng là các Plunker thể hiện các cách tiếp cận ngOnInit , setTimeout và enableProdMode chỉ trong trường hợp.

Đầu tiên, lưu ý rằng ngoại lệ này sẽ chỉ được ném khi bạn đang chạy ứng dụng của mình ở chế độ dev (theo mặc định là beta-0): Nếu bạn gọi enableProdMode()khi bootstrapping ứng dụng, nó sẽ không bị ném ( xem cập nhật đầy đủ ).

Thứ hai, đừng làm điều đó bởi vì ngoại lệ này bị ném vì lý do chính đáng: Tóm lại, khi ở chế độ dev, mọi vòng phát hiện thay đổi được theo dõi ngay sau vòng thứ hai để xác minh không có ràng buộc nào thay đổi kể từ khi kết thúc vòng đầu tiên, vì điều này sẽ chỉ ra rằng những thay đổi đang được gây ra bởi chính phát hiện thay đổi.

Trong phần mở rộng của bạn, ràng buộc {{message}}được thay đổi bởi lệnh gọi của bạn setMessage(), xảy ra trong ngAfterViewInithook, xảy ra như một phần của lượt phát hiện thay đổi ban đầu. Mặc dù bản thân nó không có vấn đề gì - vấn đề là setMessage()thay đổi liên kết nhưng không kích hoạt vòng phát hiện thay đổi mới, nghĩa là thay đổi này sẽ không được phát hiện cho đến khi một vòng phát hiện thay đổi trong tương lai được kích hoạt ở một nơi khác.

Việc thực hiện: Bất cứ điều gì thay đổi ràng buộc đều cần để kích hoạt vòng phát hiện thay đổi khi thực hiện.

Cập nhật để đáp ứng với tất cả các yêu cầu cho một ví dụ về cách thực hiện điều đó : Giải pháp của @ Tycho hoạt động, cũng như ba phương pháp trong câu trả lời @MarkRajcok đã chỉ ra. Nhưng thành thật mà nói, tất cả họ đều cảm thấy xấu xí và sai đối với tôi, giống như kiểu hack mà chúng ta đã quen với việc dựa vào ng1.

Để chắc chắn, thỉnh thoảng có trường hợp hack này là phù hợp, nhưng nếu bạn đang sử dụng chúng trên bất cứ điều gì ngoài một cơ sở rất thường xuyên, đó là một dấu hiệu cho thấy bạn đang chiến đấu với khuôn khổ thay vì chấp nhận hoàn toàn bản chất phản ứng của nó.

IMHO, một cách thành ngữ hơn, "cách Angular2" để tiếp cận điều này là một cái gì đó dọc theo dòng: ( 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() đã làm cho tôi:

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

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

Tôi đã sửa lỗi này bằng cách thêm ChangeDetectionStrargety từ lõi góc.

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

Bạn không thể sử dụng ngOnInitvì bạn chỉ thay đổi biến thành viên message?

Nếu bạn muốn truy cập một tham chiếu đến một thành phần con @ViewChild(ChildComponent), bạn thực sự cần phải chờ nó với ngAfterViewInit.

Một sửa chữa bẩn là gọi updateMessage()vòng lặp sự kiện tiếp theo với ví dụ setTimeout.

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

Vì điều này tôi đã thử các câu trả lời ở trên, nhiều câu trả lời không hoạt động trong phiên bản Angular mới nhất (6 trở lên)

Tôi đang sử dụng Kiểm soát vật liệu yêu cầu thay đổi sau khi thực hiện ràng buộc đầu tiên.

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

Thêm câu trả lời của tôi như vậy, điều này giúp một số giải quyết vấn đề cụ thể.

Bài viết Mọi thứ bạn cần biết về ExpressionChangedAfterItHasBeenCheckedErrorlỗi đều giải thích hành vi rất chi tiết.

Vấn đề với bạn thiết lập là ngAfterViewInithook vòng đời được thực thi sau khi phát hiện thay đổi các bản cập nhật DOM được xử lý. Và bạn đang thay đổi một cách hiệu quả thuộc tính được sử dụng trong mẫu trong hook này, điều đó có nghĩa là DOM cần được kết xuất lại:

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

và điều này sẽ yêu cầu một chu kỳ phát hiện thay đổi khác và Angular theo thiết kế chỉ chạy một chu kỳ tiêu hóa.

Về cơ bản, bạn có hai cách để khắc phục:

• cập nhật tài sản không đồng bộ hoặc sử dụng setTimeout, Promise.thenhoặc không đồng bộ quan sát được tham chiếu trong mẫu

• thực hiện cập nhật thuộc tính trong một hook trước khi cập nhật DOM - ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked.

Bạn chỉ cần cập nhật tin nhắn của mình trong móc vòng đời bên phải, trong trường hợp này là ngAfterContentCheckedthay ngAfterViewInitvì bởi vì trong ngAfterViewInit, kiểm tra thông báo biến đã được bắt đầu nhưng chưa kết thúc.

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

vì vậy mã sẽ chỉ là:

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 :)'
  }      
}

xem bản demo làm việc trên Plunker.

Lỗi này đang đến vì giá trị hiện tại đang được cập nhật ngay lập tức sau khi được khởi tạo. Vì vậy, nếu bạn sẽ cập nhật giá trị mới sau khi giá trị hiện tại được hiển thị trong DOM, thì nó sẽ hoạt động tốt. Giống như đã đề cập trong bài viết này Gỡ lỗi góc "Biểu thức đã thay đổi sau khi được kiểm tra"

ví dụ bạn có thể sử dụng

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

}

hoặc là

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

Như bạn có thể thấy tôi đã không đề cập đến thời gian trong phương thức setTimeout. Vì nó là API do trình duyệt cung cấp, không phải API JavaScript, vì vậy, nó sẽ chạy riêng biệt trong ngăn xếp trình duyệt và sẽ đợi cho đến khi các mục ngăn xếp cuộc gọi kết thúc.

Làm thế nào khái niệm envokes API trình duyệt được Philip Roberts giải thích trong một trong các video Youtube (Vòng lặp sự kiện là gì?).

Bạn cũng có thể thực hiện cuộc gọi của mình đến updateMessage () trong phương thức ngOnInt () - ít nhất là nó hoạt động với tôi

ngOnInit() {
    this.updateMessage();
}

Trong RC1, điều này không kích hoạt ngoại lệ

Bạn cũng có thể tạo bộ hẹn giờ bằng Observable.timerchức năng rxjs , sau đó cập nhật tin nhắn trong đăng ký của bạn:                    

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

Nó báo lỗi vì mã của bạn được cập nhật khi ngAfterViewInit () được gọi. Có nghĩa là giá trị ban đầu của bạn đã thay đổi khi ngAfterViewInit diễn ra, Nếu bạn gọi nó trong ngAfterContentInit () thì nó sẽ không gây ra lỗi.

ngAfterContentInit() {
    this.updateMessage();
}

Tôi không thể nhận xét về bài đăng của @Biranchi vì tôi không có đủ danh tiếng, nhưng nó đã khắc phục vấn đề cho tôi.

Một điều cần lưu ý! Nếu thêm changeDetection: ChangeDetectionStrargety.OnPush trên thành phần không hoạt động và thành phần con của nó (thành phần câm) cũng thử thêm nó vào cha mẹ.

Điều này đã sửa lỗi, nhưng tôi tự hỏi những tác dụng phụ của việc này là gì.

Tôi đã gặp lỗi tương tự trong khi làm việc với dữ liệu. Điều gì xảy ra là khi bạn sử dụng * ngFor bên trong một * ngFor datable khác có thể gây ra lỗi này khi nó xen vào chu kỳ thay đổi góc. SO thay vì sử dụng datable bên trong datable sử dụng một bảng thông thường hoặc thay thế mf.data bằng tên mảng. Điều này hoạt động tốt.

Tôi nghĩ rằng một giải pháp đơn giản nhất sẽ như sau:

1. Thực hiện một việc thực hiện gán giá trị cho một số biến tức là thông qua hàm hoặc setter.
2. Tạo một biến lớp (static working: boolean)trong lớp nơi hàm này tồn tại và mỗi khi bạn gọi hàm, chỉ cần làm cho nó đúng bất cứ khi nào bạn muốn. Trong hàm, nếu giá trị làm việc là đúng, thì chỉ cần trả về ngay mà không làm gì cả. khác, thực hiện các nhiệm vụ bạn muốn. Đảm bảo thay đổi biến này thành false sau khi tác vụ hoàn thành, tức là ở cuối dòng mã hoặc trong phương thức đăng ký khi bạn hoàn thành việc gán giá trị!