___ ifadesi kontrol edildikten sonra değişti

Neden bu basit yığındaki bileşen?

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

atma:

İSTİSNA: 'App @ 0: 5'teyim {{message}}' ifadesi kontrol edildikten sonra değişti. Önceki değer: 'Yüklüyorum :('. Geçerli değer: 'Tümü yüklemeyi tamamladım :)' [App @ 0: 5] 'de {{message}}

tek yaptığım, görüşüm başlatıldığında basit bir bağlayıcıyı güncellemek mi?

Drewmoore tarafından belirtildiği gibi, bu durumda uygun çözüm mevcut bileşen için değişiklik tespitini manuel olarak tetiklemektir. Bu, herhangi bir üst bileşenin güncellenmesini sağlayan nesnenin detectChanges()yöntemi ChangeDetectorRef(içe aktarılan angular2/core) veya yöntemi kullanılarak yapılır markForCheck(). İlgili örnek :

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

}

Burada ayrıca her durumda ngOnInit , setTimeout ve enableProdMode yaklaşımlarını gösteren Plunkers'lar bulunmaktadır .

İlk olarak, bu istisnanın yalnızca uygulamanızı dev modunda çalıştırdığınızda atılacağını unutmayın (beta-0'dan itibaren varsayılan olarak durum budur): enableProdMode()Uygulamayı önyüklerken çağrı yaparsanız , atılmaz ( bkz. güncellenmiş paket ).

İkincisi, bunu yapmayın, çünkü bu istisna iyi bir nedenle atılmaktadır: Kısacası, dev modundayken, her değişiklik algılamasının hemen ardından, ilkin sonundan bu yana hiçbir bağlantının değişmediğini doğrulayan ikinci bir tur gelir, Bu, değişikliklerin değişiklik algılamasının kendisinden kaynaklandığını gösterir.

Gövdenizde, bağlama {{message}}, ilk değişiklik algılama dönüşünün bir parçası olarak gerçekleşen kancada setMessage()gerçekleşen çağrınızla ngAfterViewInitdeğiştirilir. Bu kendi başına sorunlu değildir - sorun, setMessage()bağlamayı değiştirmesi, ancak yeni bir değişiklik algılama turunu tetiklememesidir; bu, gelecekteki bir değişiklik saptama turu başka bir yerde tetiklenene kadar bu değişikliğin algılanmayacağı anlamına gelir.

Paket servisi olan şey : Bağlamayı değiştiren her şeyin, bir değişiklik algılaması gerçekleştirdiğinde tetiklenmesi gerekir.

Bunun nasıl bir örnek için tüm isteklerine yanıt olarak Güncelleme Tycho çözüm eserleri @ gibi içinde üç yöntem yapın: cevabın @MarkRajcok dikkat çekti. Ama açıkçası, hepsi bana çirkin ve yanlış geliyor, tıpkı ng1'de alıştığımız bir tür hack gibi.

Vardır, Emin olmak için ara sıra bir tercihten başka bir şeye bunları kullanıyorsanız bu kesmek uygun koşullar ancak çok ara sıra esasına, bu tam olarak reaktif doğasını kucaklayan yerine çerçeveyi kavga etmen bir işarettir.

IMHO, daha deyimsel, "Angular2 yol" yaklaşan bu çizgisinde bir şeydir: ( 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() benim için çalıştı:

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

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

Bunu açısal çekirdekten ChangeDetectionStrategy ekleyerek çözdüm.

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

ngOnInitÜye değişkenini değiştirdiğiniz için kullanamaz messagemısınız?

Bir alt bileşene yapılan bir başvuruya erişmek istiyorsanız @ViewChild(ChildComponent), bununla birlikte beklemeniz gerekir ngAfterViewInit.

Kirli bir düzeltme, bir updateMessage()sonraki olay döngüsünde örneğin setTimeout ile çağırmaktır .

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

Bunun için yukarıdaki cevapları denedim birçok Angular'ın en son sürümünde çalışmıyor (6 veya üstü)

İlk bağlama yapıldıktan sonra değişiklik yapılması gereken Malzeme kontrolü kullanıyorum.

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

Cevabımı eklemek, bazılarının belirli sorunu çözmesine yardımcı olur.

Hata hakkında bilmeniz gereken her şeyExpressionChangedAfterItHasBeenCheckedError makalede davranışı ayrıntılı olarak açıklamaktadır.

Kurulumunuzdaki sorun, ngAfterViewInitdeğişiklik tespiti işlenmiş DOM güncellemelerinden sonra yaşam döngüsü kancasının yürütülmesidir. Ve bu kancadaki şablonda kullanılan özelliği etkili bir şekilde değiştiriyorsunuz, bu da DOM'un yeniden oluşturulması gerektiği anlamına geliyor:

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

ve bu başka bir değişiklik algılama döngüsü gerektirir ve Angular by design, sadece bir özet döngüsünü çalıştırır.

Temel olarak nasıl düzelteceğiniz iki alternatifiniz var:

• kullanarak ya uyumsuz özelliği güncelleştirmek setTimeout, Promise.thenya da asenkron gözlemlenebilir şablonunda başvuruda

• özellik güncellemesini DOM güncellemesinden önce bir kancada gerçekleştirin - ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked.

Sadece mesajınızı sağ yaşam döngüsü kancasında güncellemeniz gerekir, ngAfterContentCheckedbunun yerine ngAfterViewInitngAfterViewInit'te değişken mesaj için bir kontrol başlatıldı, ancak henüz bitmedi.

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

kod sadece olacak:

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

Plunker ile ilgili çalışma demosuna bakın.

Bu hata, mevcut değer başlatıldıktan hemen sonra güncellendiği için geliyor. Bu nedenle, mevcut değer DOM'da oluşturulduktan sonra yeni değeri güncelleyecekseniz, o zaman iyi çalışır. Bu makalede belirtildiği gibi Açısal Hata Ayıklama "İfade kontrol edildikten sonra değişti"

örneğin kullanabilirsiniz

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

}

veya

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

Gördüğünüz gibi ben setTimeout yönteminde zaman bahsetmedim. Bir JavaScript API değil, tarayıcı tarafından sağlanan API olduğundan, bu tarayıcı yığınında ayrı olarak çalışacak ve çağrı yığını öğeleri bitene kadar bekleyecektir.

Tarayıcı API'sı kavramı Youtube videosundan birinde Philip Roberts tarafından nasıl açıklanır (Olay döngüsü nedir?).

NgOnInt () - Metodunda updateMessage () çağrınızı da yapabilirsiniz, en azından benim için çalışıyor

ngOnInit() {
    this.updateMessage();
}

RC1'de bu istisnayı tetiklemez

Ayrıca rxjs Observable.timerişlevini kullanarak bir zamanlayıcı oluşturabilir ve ardından aboneliğinizdeki mesajı güncelleyebilirsiniz:                    

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

NgAfterViewInit () çağrıldığında kodunuz güncellendiğinden bir hata atar . NgAfterViewInit gerçekleştiğinde başlangıç ​​değerinizin değiştiği, bunu ngAfterContentInit () ' de çağırırsanız hata atmayacağı anlamına gelir .

ngAfterContentInit() {
    this.updateMessage();
}

Yeterince üne sahip olmadığım için @Biranchi'nin yazısına yorum yapamadım, ancak benim için sorunu düzeltti.

Dikkat edilmesi gereken bir şey! Ekliyorsanız changeDetection: ChangeDetectionStrategy.OnPush bileşeni üzerinde çalışmaya vermedi ve onun bir alt bileşen (dilsiz bileşeni) da ebeveyne eklemeyi deneyin.

Bu hatayı düzeltti, ama bunun yan etkilerinin ne olduğunu merak ediyorum.

Datatable ile çalışırken benzer bir hata aldım. Ne olur? * NgFor başka bir * ng için kullandığınızda, datatable için açısal değişim döngüsünü kesiştiği için bu hatayı atın. SO datatable içinde datatable kullanmak yerine, normal bir tablo kullanın veya mf.data yerine dizi adı. Bu iyi çalışıyor.

Bence en basit çözüm aşağıdaki gibi olabilir:

1. İşlev veya ayarlayıcı aracılığıyla bir değişkene değer atamanın bir uygulamasını yapın.
2. (static working: boolean)Bu işlevin bulunduğu sınıfta bir sınıf değişkeni oluşturun ve işlevi her aradığınızda, istediğinizi doğru yapın. İşlev içinde, çalışma değeri doğruysa, hiçbir şey yapmadan hemen geri dönün. yoksa istediğiniz görevi gerçekleştirin. Görev tamamlandıktan sonra, yani kod satırının sonunda veya değerleri atamayı tamamladığınızda abone olma yöntemi içinde bu değişkeni false olarak değiştirdiğinizden emin olun!