Implémenter un SELECT

Bonsoir à tous.

Je souhaite implémenter un select avec Angular comme suit :

Code:

---

1 2 3 4 5

<select [(ngModel)]="computing" (change)="compute()"> <option value="1.0-1" selected>Decimals</option> <option value="1.0-0">Integers</option> </select>

---

Cela pose plusieurs soucis:
- Lors du premier accès à la page, aucune des deux options n'est sélectionnée par défaut. Cela me pose un gros soucis et l'utilisation d'un attribut "selected" n'y change rien.
- La fonction appelée dans le (change) n'est appelée que lorsque je sélectionne une première option, plus jamais ensuite.

Je débute dans l'utilisation d'Angular alors pardonnez mes approximations :)
Au passage si quelqu'un aurait un lien avec de la documentation assez bien foutue, car mise-à-part le tutoriel "Tour of Heroes" sur le site officiel, je n'ai pas eu une initiation très fournie.
Merci pour votre aide !

(1)

ci dessous ça fonctionne mais c'est mi Angular mi balise HTML

Code:

---

1 2 3 4 5 6 7 8

<select [(ngModel)]="computing" (change)="compute()"> <option value="1.0-1">Decimals</option> <option value="1.0-0">Integers</option> </select> ... ... computing = '1.0-1'; // on initialise ici car c'est le ngModel qui se charge de sélectionner l'option, pas besoin de 'selected' dans le html

---

mais cette écriture n'est pas entièrement "Angular"
<option value="1.0-1">Decimals</option>

avec value="...." c'est du html classique, aucun lien n'est fait avec le composant.

VERSION ANGULAR
d'abord [value] avec les crochets c'est le binding !

et mettre des accolades pour dire que c'est du texte

Code:

---

<option [value]="'1.0-1'">Decimals</option>

---

ou

option1 et option2 sont des variables du composant (donc sans les accolades)

Code:

---

1 2 3 4 5 6 7

<option [value]="option1">Decimals</option> <option [value]="option2">Integers</option> ... ... option1 = '1.0-1'; option2 = '1.0-0'; ...

---

conclusion :

Code:

---

1 2 3 4

<select [(ngModel)]="computing" (change)="compute()"> <option [value]="'1.0-1'">Decimals</option> <option [value]="'1.0-0'">Integers</option> </select>

---

Code:

---

1 2 3 4 5 6 7

computing = '1.0-1'; ... ...   compute() { console.log(this.computing); }

---

Merci pour cette explication claire, mon problème est résolu.
Il s'agissait ici d'un attribut du component dont je souhaitais modifier la valeur en fonction de celle du select, mais j'aurais dû le préciser.

Merci pour votre aide !