SetTimeout nicht Ansicht Aktualisierung

Question

ich meine Komponente haben, die ein Stück Code, zB:

this.test= false; 
setTimeout(() => { 
    this.test= true; 
}, 1000); 

Meine Ansicht hat {{Test}} Das Problem ist, dass die Ansicht nicht auf true ändert, bleibt es als falsch . Ich habe gelesen, dass dies ein Problem mit Polyfills sein könnte? Aber es funktionierte für ein anderes Projekt und ich habe keine Polyfills dafür hinzugefügt.

UPDATE:

behoben, war es, weil der Blick nicht einmal aktualisiert wurde, obwohl der Wert war. Ich glaube, es gibt etwas in der Form von changedetectref, aber ich habe beschlossen, meinen booleschen Wert in ein Observable umzuwandeln, und es hat funktioniert. Vielen Dank.

Answer 1

Ihr Problem ist höchstwahrscheinlich an anderer Stelle im Code. Ihr Beispielcode funktioniert IF Die umschließende Funktion ist eine Funktion() und keine Pfeilfunktion. Ansonsten aktualisieren Sie eine andere this. Es gibt eine Verwirrung darüber, wann this erreichbar ist und ich hoffe das Schlagbeispiel kann es deutlich machen. Pfeilfunktionen haben nicht this, aber eine Pfeilfunktion kann auf this von der beiliegenden Funktion zugreifen.

'use strict'; 
 

 
let o = function(){}; 
 

 
o.method = function() { 
 
    let updateView = _=> { 
 
    document.getElementById('app').append(this.test+'\n'); 
 
    this.test = "Test didn't work. (most likely unbounded)"; 
 
    } 
 
    this.test = 'Initial value'; 
 
    updateView(); 
 
    let i = 0; 
 
    setTimeout(() => { 
 
     this.test = 'Arrow function inside function() works'; 
 
     updateView() 
 
    }, ++i * 1000); 
 
    setTimeout(function() { 
 
     this.test = 'Unbouned function() inside function() does not work'; 
 
     updateView(); 
 
    }, ++i * 1000); 
 
    setTimeout(function() { 
 
     this.test = 'Bouned function() inside function() works'; 
 
     updateView() 
 
    }.bind(this), ++i * 1000); 
 
} 
 

 
o.method();

<pre id="app"></pre>

Answer 2

Ihr Code sieht gut aus, aber nicht sicher, ob Ihr Browser unterstützt Pfeil Funktion oder nicht, versuchen Sie dies:

setTimeout(function(){ 
    this.test= true; 
}, 1000); 

Answer 3

wie diese versuchen:

component.ts

import { Observable } from 'rxjs/Rx'; 

export class sampleComponent { 
    private test: boolean = false; 

    constructor() { 
     Observable.interval(1000).subscribe((x) => { 
      this.test = true; 
     }); 
    }  
} 

component.html

<div>{{test}}</div> 

demo