Discussion :

[auloma]

Bonsoir à tous.

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[dukoid]

(1)

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
  computing = '1.0-1';
...
...
 
  compute() {
    console.log(this.computing);
  }

[auloma]

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 !