angular2 Eigenschaft geändert hat Fehler

Habe ich eine Richtlinie app.service.ts speichert die app Daten, und ich versuche, diese Anweisung zu verwenden, von anderen Komponenten, so kann ich bekommen und den Status der app (die funktioniert).

aber es gibt mir diese Fehlermeldung, wenn ich versuche, Sie zu binden, eine Eigenschaft, die aus dieser Richtlinie auf die Ansicht

EXCEPTION: Expression 'loading: {{loadState}} in App@0:23' has changed after it was checked. Previous value: 'false'. Current value: 'true' in [loading: {{loadState}} in App@0:23]

hier bin ich versucht zu zeigen, laden-text, wenn appState.get().loadState == true

app.service.ts - Quelle

import {Injectable} from 'angular2/core';
import {WebpackState} from 'angular2-hmr';

@Injectable()
export class AppState {
  _state = {}; //you must set the initial value
  constructor(webpackState: WebpackState) {
    this._state = webpackState.select('AppState', () => this._state);
  }

  get(prop?: any) {
    return this._state[prop] || this._state;
  }

  set(prop: string, value: any) {
    return this._state[prop] = value;
  }
}

app.ts

import {AppState} from './app.service';

export class App{

   constructor(public appState: AppState) {
      this.appState.set('loadState', false);
   }
   get loadState() { 
      return this.appState.get().loadState;
   }
}

app.html

<div class="app-inner">
  <p>loading: {{loadState}}</p>
    <header></header>
  <main layout="column" layout-fill>
    <router-outlet></router-outlet>
  </main>
</div>

übernehmen app.ts hat ein Kind Komponente home.ts geladen und an die view

Hause.ts

 export class HomeCmp {
 page;

 constructor(private wp: WPModels, private appState: AppState) {}

 ngOnInit() {
   var pageId = this.appState.get().config.home_id;
   this.appState.set('loadState', true);    //before http request

   this.wp.fetch(WPEnpoint.Pages, pageId).subscribe(
     res => {
       this.page = res;
       this.appState.set('loadState', false);  //after http request
     },
     err => console.log(err)
   );
 }
}
  • Sie können shared object für diese. Ich denke {{loadState}} im HTML wird immer Fehler schmeißen diese Weg. Eher versuchen zu binden, einige freigegebene variable verwendet, in Dienst. zB. _state={} ist ein gemeinsames Objekt. einige Eigenschaft und dann in html können Sie für den Zugriff durch {{appState._state.someProperty}}
  • gleiche Fehler
InformationsquelleAutor Murhaf Sousli | 2016-03-27
  1. 2

    Die Lösung ist ziemlich simpel, indem Sie eine spezielle Komponente zur Anzeige von Ladestatus vom Staat-service app.service.ts, hier ist der code:

    LoaderCmp zeigt loadState Attribut von appState service direkt.

    import {Component} from 'angular2/core';
import {AppState} from "../../app.service";

@Component({
  selector: 'loader',
  template: `
   loading state : {{appState._state.loadState}}
  `
})

export class LoaderCmp{
  constructor(private appState: AppState) {}
}

    app.service.ts hält unser app-Status.

    import {Injectable} from 'angular2/core';
import {WebpackState} from 'angular2-hmr';

@Injectable()
export class AppState {
  _state = {}; //you must set the initial value
  constructor(webpackState: WebpackState) {
    this._state = webpackState.select('AppState', () => this._state);
  }

  get(prop?: any) {
    return this._state[prop] || this._state;
  }

  set(prop: string, value: any) {
    return this._state[prop] = value;
  }
}

    app.ts keine Konfiguration erforderlich, fügen Sie einfach LoaderCmp app Richtlinien.

    @Component({
  selector: 'app',
  directives: [HeaderCmp, LoaderCmp],
  template: `
  <div class="app-inner">
    <loader></loader>
    <header></header>
    <main>
      <router-outlet></router-outlet>
    </main>
  </div>
  `
})
export class App  {
    constructor() { }
}

    update des app-Zustands von jeder Komponente, zum Beispiel: Hause.ts

    export class HomeCmp {
 page;

 constructor(private wp: WPModels, private appState: AppState) {}

 ngOnInit() {
   var pageId = this.appState.get().config.home_id;
   this.appState.set('loadState', true);    //before http request

   this.wp.fetch(WPEnpoint.Pages, pageId).subscribe(
     res => {
       this.page = res;
       this.appState.set('loadState', false);  //after http request
     },
     err => console.log(err)
   );
 }
}
    InformationsquelleAutor Murhaf Sousli
  2. 0

    https://github.com/angular/angular/issues/6005
    Es ist eine Eigenschaft von dev-Modus arbeiten, wie beabsichtigt. Aufruf enableProdMode( ) - sehen, wenn die bootstrapping-die app verhindert, dass die exception wird geworfen.

    Müssen Sie die trigger-ändern Sie die Erkennung erneut. Auslösung Angular2 change detection manuell

    InformationsquelleAutor shiv
  3. 0

    Ich denke, dass Sie nutzen könnten die ChangeDetectorRef Klasse und Ihre Methode detectChanges.

    Für diese injizieren Sie es in Ihrem App-Komponente und rufen Sie die Methode in Ihren ngAfterViewInit.

     constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
      this.cdr.detectChanges();
  }

    Sehen, diese Frage für mehr details:

    Dass gesagt wird, ich würde eine beobachtbare Eigenschaft, die in Ihrem Staat-service Benachrichtigen-Komponenten, wenn Sie es Lesen.

    @Injectable()
export class AppStateService {
  state: string;
  state$: Observable<string>;
  private stateObserver : Observer<string>;

  constructor(){
    this.state$ = new Observable(observer => this.stateObserver = observer).share();
  }

  updateState(newState) {
    this.state = newState;
    this.stateObserver.next(newState);
  }
}

    Sowie in der component:

    @Component({...})
export class SomeComponent {
  constructor(service: AppStateService) {
    service.state$.subscribe(newState => {
      (...)
    });
  }
}

    Finden Sie unter diesen links für weitere details:

    • Ich versuchte dieses aber es gab mir genau den selben Fehler
    • Du meinst, Sie versuchte zu rufen detectChanges? In welcher Komponente lifecycle Haken? Ansonsten habe ich einen Tippfehler gemacht in meinem snippet. Es ist ngAfterViewInit statt...
    • Es scheint, dass es keine Notwendigkeit für detectChanges ich mochte die Idee der Verwendung von beobachtbaren für den staatlichen Dienst. aber ich Wahl das normale app.service.ts weil es Unterstützung für mehrere Eigenschaften. Ich schrieb die Lösung für beide Wege.
    InformationsquelleAutor Thierry Templier
  4. 0

    wp irgendwie scheint die Ausführung von code außerhalb der Angulars zone. Zu zwingen, den code wieder in Angulars zone, verwenden Sie zone.run() wie unten gezeigt für code-updates der Eigenschaften, Ihrer Ansicht bindet:

    import {NgZone} from 'angular2/core';

export class HomeCmp {
 page;

 constructor(private zone:NgZone, private wp: WPModels, private appState: AppState) {}

 ngOnInit() {
   var pageId = this.appState.get().config.home_id;
   this.appState.set('loadState', true);    //before http request

   this.wp.fetch(WPEnpoint.Pages, pageId).subscribe(
     res => {
       this.zone.run(() => {
         this.page = res;
         this.appState.set('loadState', false);  //after http request
       });
     },
     err => console.log(err)
   );
 }
}
    InformationsquelleAutor Günter Zöchbauer
  5. 0

    Andere Lösung mithilfe von beobachtbaren und share-Funktion, hier wechselten wir die app.service.ts mit app.state.ts die Unterstützung nur ein Attribut.

    LoaderCmp zeigt loadState Attribut von appState service direkt.

    import {Component} from 'angular2/core';
import {AppStateService} from "../../app.state";

@Component({
  selector: 'loader',
  template: `
   loading state : {{ active }}
  `
})

export class LoaderCmp{
  active;
  constructor(private service: AppStateService) {}
    ngOnInit() {
       this.service.state$.subscribe(newState => {
       this.active = newState;
    });
  }
}

    app.Zustand.ts hält unseren laden Stand.

    import "rxjs/add/operator/share";
import {Observable} from "rxjs/Observable";
import {Observer} from "rxjs/Observer";
import {Injectable} from "angular2/core";

@Injectable()
export class AppStateService {
  state: boolean = false;
  state$: Observable<boolean>;
  private stateObserver : Observer<boolean>;

  constructor(){
    this.state$ = new Observable(observer => this.stateObserver = observer).share();
  }

  updateState(newState) {
      this.state = newState;
      this.stateObserver.next(newState);
  }
}

    app.ts keine Konfiguration erforderlich, fügen Sie einfach LoaderCmp app Richtlinien.

    @Component({
  selector: 'app',
  directives: [HeaderCmp, LoaderCmp],
  template: `
  <div class="app-inner">
    <loader></loader>
    <header></header>
    <main>
      <router-outlet></router-outlet>
    </main>
  </div>
  `
})
export class App  {
    constructor() { }
}

    update des app-Zustands von jeder Komponente, zum Beispiel: Hause.ts

    export class HomeCmp {
 page;

 constructor(private wp: WPModels, private service: AppStateService) {}

 ngOnInit() {
   this.service.updateState(true);    //before http request

   this.wp.fetch(WPEnpoint.Pages, pageId).subscribe(
     res => {
       this.page = res;
       this.service.updateState(false);  //after http request
     },
     err => console.log(err)
   );
 }
}
    InformationsquelleAutor Murhaf Sousli
Schreibe einen Kommentar