Wie initialisiert man den Wert eines Eingangs [Bereich] mit Angular2 wenn Wert über 100 ist

Ich konfrontiert diese Situation mit AngularJS, das war der Grund für die Post How to initialize the value of an input[range] using AngularJS when value is over 100.
Ich frage mich, dass Angular2 eine bessere Initialisierung eines Wertes außerhalb des Standardbereichs [0,100] und innerhalb eines Bereichs [min, max] verwaltet.Wie initialisiert man den Wert eines Eingangs [Bereich] mit Angular2 wenn Wert über 100 ist

Der Code, den ich bauen versucht Angular2, zu lernen, ist fast eine Übersetzung der früheren Post:

<html> 
 
<head> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.umd.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all.umd.min.js"></script> 
 

 
<script> 
 
(function (app) { 
 
    app.AppComponent = ng.core.Component({ 
 
\t  selector: 'my-app', 
 
\t  template: ' \t {{ctrl.min}}<input type="range" [(ngModel)]="ctrl.value" min="{{ctrl.min}}" max="{{ctrl.max}}" />{{ctrl.max}}<br/>value:{{ctrl.value}}' 
 
\t }) 
 
\t .Class({ 
 
\t  constructor: function() { 
 
\t \t this.ctrl = { min:50, max:150, value:150}; 
 
\t  } 
 
\t }); 
 
})(window.app || (window.app = {})); 
 

 
(function (app) { 
 
\t document.addEventListener('DOMContentLoaded', function() { 
 
\t ng.platform.browser.bootstrap(app.AppComponent); 
 
\t }); 
 
})(window.app || (window.app = {})); 
 
</script> 
 
    
 
</head> 
 
<body> 
 
    <my-app>Loading...</my-app> 
 
</body> 
 
</html>

Ausführen dieses Schnipsel dieses Ergebnis geben:

Der Schieber ist an der Position 100, sollte aber an der Position 150 sein. Das erwartete Ergebnis ist:

Gibt es eine Möglichkeit konsequent die drei Werte eingestellt werden (min, max und Wert), ohne die Begrenzung von [0.100] für den Wert?

Kann das DOM nach dem Initialisieren des Bereichs und vor dem Festlegen des Anfangswerts aktualisiert werden?

Quelle

2016-08-06 mpromonet

Meine bevorzugte Art, eine Bestellung wie diese zu bestimmen (keine Ahnung, ob es der richtige Weg ist), besteht darin, sie einfach auf setTimeout zu verschieben.

constructor() { 
     this.min = 50; 
     this.max = 150; 
     setTimeout(() => this.value = 150); 
    }

Sie müssen keinen tatsächlichen Timing-Wert festlegen. Dadurch wird sichergestellt, dass this.value erst beim nächsten Änderungserkennungszyklus gesetzt wird.

See here for a live demo.

Quelle

2016-08-09 18:38:55 Harangue

Ich dachte darüber nach, aber da ich einen AJAX-Aufruf gemacht, die eine JSON-Listen von ‚min‘ bekommen, ‚Wert‘, ‚max‘. Dies muss speziell den Wert analysieren, um diese geänderte Einstellung einzuführen. – mpromonet

@mpromonet Wie ändert sich das? "http.get ('/ foo'). subscribe ((res) => {this.min = res.min; Diese max = res.max; setTimeout (() => this.value = res.value);}) – Harangue

Ich habe versucht, 'http.get ('/ controls') zu verwenden. Subscribe (function (data) {this.controlList = data.json();}' und ein '* ngFor =" lost controlList "' zu Iterieren Sie das Array der Steuerelemente Ihre Lösung benötigt zusätzlichen Code zum Speichern der HTTP-Antwort. – mpromonet

Wie initialisiert man den Wert eines Eingangs [Bereich] mit Angular2 wenn Wert über 100 ist

Antwort

Verwandte Themen