Angolare 2 – *ngif non rinfrescante quando la variabile di aggiornamento da oberservable iscriviti

nel codice html ho avviso dovrebbe essere visualizzato solo quando uno stato di errore si verifica come thius

<div class="alert alert-danger" *ngIf="error">
    <strong>Not saved!</strong> There was an error when saving the project. Please try again later.
</div>

questo funziona bene. ma quando ho impostato il valore di una osservabile il ngIf non ottiene il valore aggiornato.

Qui il codice semplificato che imposta sempre errore vero per il test purposses

export class createProjectComponent {
    constructor(private service:ProjectsService){

    }

    model = new myModel();
    error = false;
    submitForm(){    
        this.service.createProject(this.model).subscribe(i=>{
            this.error=true;
          }
    }

c’è qualche tipo di notifica che devo trigger?

  • Che cosa è this.service.createProject(this.model) facendo? Stai usando non Angular2 biblioteca?
  • attualmente non fa nulla e restituisce solo un osservabili (nessun errore) . E ho anche il debug che l’errore proprietà è impostata su true . Suppongo che abbia a che fare con un qualche tipo di attività in background che rxjs è la creazione di
  • Si può riprodurre in Plunker?
  • Il codice sembra corretto. Ho anche usato *ngIf come è e dovrebbe funzionare. Si usare in modo sbagliato subscribe(). Provare .subscribe( data => {}, error => {this.error =true});
  • lui non è sbagliato utilizzando .iscriviti come ha fatto. Lui semplicemente non gestire l’errore 😉
  • Si prega di creare un Plunkr. Ho fatto provare a fare uno qui : plnkr.co/modifica/c64OLrDKJldBkoRqY8Jr?p=anteprima e niente di sbagliato (attendere 2s e vedrai che l’errore). Penso che forse, per aggiungere un po ‘ più di codice corrispondente.
  • So che dovrebbe funzionare. Non riesco a capire il perché sta cercando di risolvere errore in “successo” di richiamata 😛
  • oh, giusto, non avevo la possibilità di concentrarsi sul nome della variabile haha.
  • era solo per testare le cose 🙂

 

2 Replies
  1. 27

    Si può provare se questo risolve il tuo problema:

    constructor(private cdRef:ChangeDetectorRef) {}
    
    submitForm(){    
        this.service.createProject(this.model).subscribe(i=>{
            this.error=true;
            this.cdRef.detectChanges();
        }
    }

    Se non c’è una parte di codice in this.service.createProject(this.model) che causa l’esecuzione di lasciare Angulars zona.

    aggiornamento

    Non avete bisogno di questo se si utilizza ()=> tutto il mondo, invece di function () e se non si passa funzioni solo per nome come someFunc(mycallback) ma invece con someFunc(() => mycallback()) o someFunc(mycallback.bind(this))

    • non cambia nulla
    • Quindi è improbabile che la causa può essere derivato dalle informazioni disponibili nella tua domanda. Si prega di provare a riprodurre in Plunker.
    • Hai controllato this.error=true; viene eseguito a tutti?
    • sì, ho il debug è un fatto di una console.log. @plunker mal di controllo, ma questo sarà dispendioso in termini di tempo di cui ho bisogno angolare 2 e tutto ciò che di orribile idraulico roba…
    • pro-tip : Andare a angolare pagina su github : github.com/angular/angular/issues/new e creare un nuovo problema. Ti danno un link con un pre-installazione plunkr per kickstart alcune demo di ng2. Plunkr : plnkr.co/modifica/tpl:AvJOMERrnz94ekVua0u5
    • O semplicemente utilizzare il [ New | V ] pulsante Plunker. C’è un pronto per l’uso Angular2 TS modello.
    • perché ho bisogno di questo qui. Non ho mai bisogno di nessuna parte. Voglio dire, funziona. ma perché ne ho bisogno?
    • > Si è scoperto che questo ha funzionato perché stavo usando onAuthStateChanged(), che vuole aggiornare un osservatore e non solo di aggiornare una variabile. Utilizzando detectChanges causato problemi quando routing. Così, Per auth modifiche ho dovuto utilizzare authState.subscribe() che sostanzialmente fa la stessa cosa che volevo senza osservatori, detectChanges, o qualsiasi problemi di
    • in che situazione ho bisogno di utilizzare questo codice questo.cdRef.detectChanges(); in angolare??
    • quando si cambia lo stato in un modo che Angolare di rilevamento delle modifiche non lo riconosce. Per esempio quando si cambia lo stato in metodi richiamati da rilevamento delle modifiche o callback chiamata da codice non viene eseguito all’interno di Angulars zona.
    • Zöchbauer. Vi ringrazio molto.

  2. 2

    Trovato l’errore. il this modifiche . nell’osservare this punti per la osbervable non più di un componente.

    quindi devo avere un punto di riferimento della componente variabile e set di errore su questo riferimento al vero.

    di lavoro codice simile a questo:

    var component = this;
    
    this.service.createProject(this.model).subscribe(i=>{
                    component.error = true;
    • No, non punti di sottoscrizione utilizzato grasso frecce … Il problema viene da qualcos’altro. Funziona ok, ma potrebbe essere meglio tho 😉 Se siete interessati a più di debug post ancora di più il contesto, altrimenti non importa
    • Non avete bisogno di questo se si utilizza ()=> tutto il mondo, invece di function () e se non si passa funzioni solo per nome come someFunc(mycallback) ma invece con someFunc(() => mycallback()) o someFunc(mycallback.bind(this))
    • vostra destra. ho appena scritto questo come un comportamento di chsarp. non ero a conoscenza di questo. molti thx!

Lascia un commento