Angular 7 et le plugin chosen de JQuery, comment assigner une valeur par programmation ?

Bonjour à tous,

je suis vraiment nouveau dans le développement en Angular et je suis tombé sur un problème que je ne comprend pas. Il semble que toute tentative pour assigné une valeur à ma liste déroulante ne semble rien faire, pas même causé une erreur en javascript.

J'utilise Angular 7 comme framework et les contrôle de liste déroulante utilise le plugin chosen de JQuery.

Je vous décris notre besoin. Nous avons créer un composante Groupe d'âge dans lequel un utilisateur peut entrez une date avec un calendrier et calculer l'âge de la personne. Tout fonctionne, sauf le changement de valeur pour la liste déroulante de groupe d'âge. Alors je ne comprend pas pourqui je ne peux modifier la valeur du champ groupe. J'ai essayé de plusieurs façon, comme les exemples de jQuery, mais cela ne fonctionne pas. Il y a peut-être un concept que j'ignore. Pouvez-vous m'aider ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 this.usagerService.getAgeParDateNaissance(args).subscribe(
        ageDTO => {
          this.ageDTO = ageDTO
          if(ageDTO.years > 0)
            this.anneesLabel = ageDTO.years + " ans ";
          if(ageDTO.months > 0)
            this.moisLabel = ageDTO.months + " mois ";
          if(ageDTO.days > 0)
            this.joursLabel = ageDTO.days + " jours ";
 
            let idx = 0; 
          if(ageDTO.years >= 0){
            this.listGroupeAge.forEach(function (item:ReferenceDTO){
              if(item.min != null && item.max != null){
                idx++;
                if(ageDTO.years >= item.min && ageDTO.years <= item.max){
 
                  groupeSel = item.code;
 
                  alert(item.code + ' idx : ' + idx);
 
                  $('msss-sigct-chosen[@id=groupe]').attr('ng-reflect-model',item.code).trigger('chosen:updated');  
 
                  this.groupeAgeOptions.groupe = groupeSel;
 
 
                  /*
                  alert('item.code : ' + item.code );
                  $("div.chosen-search").val(item.code).trigger('chosen:updated');
                  alert($('#idSelectIdent_chosen').val(groupeSel));
                  $('#groupe').val("0_5");
                  */
                }
              }
            })
          }
 
        }
      );

Ajout, j'ai pu afficher le résultat, mais je ne pense pas que la valeur soit vraiment sélectionnée :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
this.usagerService.getAgeParDateNaissance(args).subscribe(
        ageDTO => {
          this.ageDTO = ageDTO
          if(ageDTO.years > 0)
            this.anneesLabel = ageDTO.years + " ans ";
          if(ageDTO.months > 0)
            this.moisLabel = ageDTO.months + " mois ";
          if(ageDTO.days > 0)
            this.joursLabel = ageDTO.days + " jours ";
 
            let idx = 0; 
          if(ageDTO.years >= 0){
            this.listGroupeAge.forEach(function (item:ReferenceDTO){
              if(item.min != null && item.max != null){
                idx++;
                if(ageDTO.years >= item.min && ageDTO.years <= item.max){
 
                  groupeSel = item.code;
 
                 $('a.chosen-single > span')[0].innerHTML = item.nom;
                 $('div.chosen-drop > ul.chosen-results > li[' + idx + ']').addClass('active-result result-selected highlighted');     
                 $('#groupe').attr('ng-reflect-model',item.code);
 
                  this.groupeAgeOptions.groupe = groupeSel;
 
                }
              }
            })
          }

Merci !