IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Générer le contenu d'un selecteur autocomplete en fonction d'un autre


Sujet :

Angular

  1. #1
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut Générer le contenu d'un selecteur autocomplete en fonction d'un autre
    Salut !

    La théorie :
    Je suis en train de créer deux sélecteur de type "autocomplete" -> (démo, ce n'est pas la mienne): https://stackblitz.com/angular/ndkxa...ter-example.ts
    J'ai besoin que lorsque j'arrive sur la page, le premier sélecteur soit remplit de contenu, "une liste de nom doit être dedans".
    Une fois le nom sélectionné, alors une requête HTTP doit être lancé avec le nom sélectionné getTagsOfImage(nomImage) pour récupérer des "tags" et remplir mon deuxième sélecteur.
    Si je supprime le contenu du premier sélecteur :
    - Le premier selecteur doit revenir à l'état initial.
    - Le deuxième sélecteur ne doit contenir aucun valeur ( vu qu'aucune image n'a été selectionnée).


    Le problème :
    -Lors du chargement de la page, une requête part pour chercher des tags alors que l'image n'a pas été selectionnée..
    - Lors de la suppression de l'image dans le selecteur, idem, les tags sont recherchés..

    TS :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
     
    export class ... {
      ...
     
      filteredOptions: Observable<any[]>;
      filteredOptions2: Observable<any[]>;
     
     
     
      constructor(..){
      }
     
      ngOnInit() {
        this.containerForm = this.formBuilder.group({
          ...
          image: new FormControl(' ', Validators.required),
          imageTag: new FormControl('', Validators.compose([Validators.required, Validators.minLength(1)])),
          ...
        });  
     
     
        this.filteredOptions = this.containerForm.controls.image.valueChanges.pipe(
          startWith(''),
          debounceTime(400),
          distinctUntilChanged(),
          switchMap(val => {
                return this.filter(val || '')
           }) 
        )     
      }
     
      searchTagOfImage(): void{ 
     
          this.filteredOptions2 = this.containerForm.controls.imageTag.valueChanges.pipe(
            startWith(''),
            debounceTime(400),
            distinctUntilChanged(),
            switchMap(val => {
     
             //////////////////////// console.log("fired here, should not be !");/////////////
     
                  return this.filter2(val || '')
            }) 
          )  
     
      }
     
      filter(val: string): Observable<any[]> {
        console.log("toutes les images");
        // call the service which makes the http-request
        return this.dataService.getImagesAvailable()
         .pipe(
           map(response => response.filter(option => { 
             return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
           }))
         )
      } 
     
     
      filter2(val: string): Observable<any[]> {
        // call the service which makes the http-request
       /////////console.log("IT GOES HERE, BUT SHOULD NOT ! Because this.image.value is empty..");///////////
        return this.dataService.getTagsOfImage(this.image.value)
         .pipe(
           map(response => response.filter(option => { 
             return option.tag.toLowerCase().indexOf(val.toLowerCase()) === 0
           }))
         )      
      }  
     
      displayFn(user: any): string {
        return user && user.name ? user.name : '';
      }
     
      displayFn2(user: any): string {
        return user && user.tag ? user.tag : '';
      }
     
      deleteVariable(variable: string, e?, i?): void {
     
        switch (variable) {
          ...
          case 'image':
            this.containerForm.controls.imageTag.patchValue('', { emitEvent: false });
            this.containerForm.controls.image.patchValue('', { emitEvent: false });
            break;
          case 'imageTag':
            this.containerForm.controls.imageTag.patchValue('', { emitEvent: false });
            break;
          default:
            break;
        }
      } 
     }
    }


    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    <div class="col-md-3">
                    <div class="form-group">
                      <label for="inputImageName" class="label">Image du conteneur</label>
                      <nb-form-field>
                        <input [formControl]="image" nbInput fullWidth type="text" placeholder="Image du conteneur" [nbAutocomplete]="auto" />
                        <button nbSuffix nbButton ghost type="button" (click)="deleteVariable('image')">
                          <i class="fas fa-times"></i>
                        </button>
                      </nb-form-field>
                      <nb-autocomplete #auto [displayWith]="displayFn" (selectedChange)="searchTagOfImage()">
                        <nb-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                          {{ option.name }}
                        </nb-option>
                      </nb-autocomplete>
                    </div>
                  </div>


    Ce bug cause aussi qu'au lancement de la page, l'input sélectionné par défaut est le sélecteur de tag..

    Merci pour l'aide
    Nom : bugselecteur.gif
Affichages : 341
Taille : 687,8 Ko

  2. #2
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut
    Je n'ai toujours pas réussit a corriger le problème.
    Lors je supprime manuellement le champs image avec la touche supprimer, le problème ne se produit pas, alors qu'en cliquant sur le bouton supprimer c'est comme si un "event" de sélection de contenu était lancé par le patchValue alors que je lui demande de ne pas lancer d'évent.

  3. #3
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    si tu peux mettre ça sur stackblitz parceque comment veux tu debugguer comme ça à l'aveuglette

    pour les accès api

    tu fais un console.log( (des données)
    copie colle la sortie
    JSON.stringify(des données)

    tu renvoi JSON.parse(xdes données stringifier)
    pour simuler l'envois

    tu commente bien sur ta requete // http.get( ....

  4. #4
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut
    J'essaie au maximum de mettre des stackblitz, mais parfois tendu de reproduire le cas..
    Je n'ai pas réussi à faire fonctionner le stack sur ce theme : https://stackblitz.com/edit/angular-...p.component.ts

  5. #5
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    tu pouvais juste laisser les 2 selects avec l'autocomplete

    c'est option et option2 ?

  6. #6
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut
    Je viens de supprimer l'inutile : https://stackblitz.com/edit/angular-...p.component.ts
    option et option2 ont étés renommés

    Le stackblitz est ce que j'ai de mon coté actuellement

    Je suis sur que le problème vient de là : <nb-autocomplete #auto (selectedChange)="searchTagOfImage()">
    et la fonction searchTagOfImage()

  7. #7
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    rien ne fonctionne.

  8. #8
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut
    Oui c'est ce que j'ai dis là : "Je n'ai pas réussi à faire fonctionner le stack sur ce theme "
    Je vois pas ce qui fait que la page ne s'affiche pas sur stackblitz..

  9. #9
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    ou alors si tu as un code à mettre sur bitbucket avec git
    mais faut que ça tourne

  10. #10
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut
    J'ai enfin quelque chose qui tourne, j'ai tenté de faire avec de la data locale, il m'indique une erreur au niveau du filtre, je pense que tu va voir la raison plus rapidement que moi : https://stackblitz.com/edit/github-g...e.component.ts

  11. #11
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    (1)

    déjà mettre: :any dans les map, partout !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
            map(response => response.filter(myImageTag => { 
    mettre:
           map((response: any) => response.filter(myImageTag => {
    je regarde la suite...

  12. #12
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    (2)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
     
    ...
    import { Observable, of } from 'rxjs';
     
    ...
    ...
     
      images = of([
        {
          "name": "tomcat-image",
          "createdDate": "2020-01-10 10:25:24"
        },
        {
          "name": "nginx-image",
          "createdDate": "2020-01-12 10:45:24"
        }
      ]);
     
      imageTag= of([
        {
          "tag": "20.5"
        },
        {
          "tag": "19.5"
        }
      ]);
    maintenant ça tourne, je regarde le bugue

  13. #13
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    copie / colle dans stackblitz et regarde si ça va

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
     
    import { Component } from '@angular/core';
    import { Observable, of } from 'rxjs';
    import { debounceTime, distinctUntilChanged, map, startWith, switchMap, tap } from 'rxjs/operators';
    import { ActivatedRoute } from '@angular/router';
     
     
    import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss'],
    })
    export class HomeComponent {
      containerForm: FormGroup;
     
      filteredImages: any;
      filteredImageTag: any; 
     
      images = of([
        {
          "name": "tomcat-image-1",
          "createdDate": "2020-01-10 10:25:24"
        },
        {
          "name": "nginx-image-2",
          "createdDate": "2020-01-12 10:45:24"
        }
      ]);
     
      imageTag1 = of([
        {
          "tag": "120.5"
        },
        {
          "tag": "119.5"
        }
      ]);
     
      imageTag2 = of([
        {
          "tag": "220.5"
        },
        {
          "tag": "219.5"
        }
      ]);
     
      getImages(): any {
        return this.images;
      }
     
      getImageTag(): any {
    console.log('getImageTag')    
        if (this.containerForm.get('image').value == 'tomcat-image-1') {
          return this.imageTag1;
        }
        return this.imageTag2;
      }
     
      constructor(private formBuilder: FormBuilder, private route: ActivatedRoute){}
     
      ngOnInit() {
        // Création du formulaire de création de conteneur
        this.containerForm = this.formBuilder.group({
          name: new FormControl('', Validators.compose([Validators.required, Validators.minLength(10)])),
          image: new FormControl('', Validators.required),
          imageTag: new FormControl('', Validators.required),
        });    
     
        this.route.params.subscribe(params => {
          if(params['image']){
            this.containerForm.controls.image.patchValue(params['image']);        
          }
        });
     
        // Filtrage des images récupérées depuis l'API
        this.filteredImages = this.containerForm.controls.image.valueChanges.pipe(
          startWith(''),
          debounceTime(400),
          distinctUntilChanged(),
          switchMap(val => {
                return this.filterImage(val || '')
           }),
          tap(v => this.containerForm.controls['imageTag'].setValue(''))
        )     
      }
      // Recherche des tags d'une image auparavant selectionnée
      searchTagOfImage(): void{ 
        console.log("searchTagOfImage");
        // if(this.image.value.length > 2){
        this.filteredImageTag = this.containerForm.controls.imageTag.valueChanges.pipe(
          startWith(''),
          debounceTime(400),
          distinctUntilChanged(),
          switchMap((val: string) => {
            return this.filterImageTag(val )
          })
        )    
        // }
      }
      // Récupération de toutes les images utilisables
      filterImage(val: string): Observable<any[]> {
        console.log("filterImage");
        return this.getImages()
         .pipe(
           tap( v => console.log(v)),
           map((response: any) => response.filter(myImage => {
             console.log(JSON.stringify(myImage)); 
             return myImage.name.toLowerCase().indexOf(val.toLowerCase()) === 0
           }))
         )
      } 
     
      // Filtrage des tags d'une image
      filterImageTag(val: string): Observable<any[]> {
        console.log("filterImageTag");
     
        // if(this.image.value.length  > 2){ // do not search tag if value has been delete by clicking on delete button
          return this.getImageTag()
          .pipe(
            map((response: any) => response.filter(myImageTag => { 
              return myImageTag.tag.toLowerCase().indexOf(val.toLowerCase()) === 0
            }))
          )
        // }
     
      }  
     
     
      displayFn(image: any): string {
        return image?.name || '';
      }
     
      displayFn2(user: any): string {
        return user?.tag || '';
      }
     
      deleteVariable(variable: string, e?, i?): void {    
        switch (variable) {      
          case 'image':
            console.log("ici");
            this.containerForm.controls.imageTag.patchValue("");
            this.containerForm.controls.image.patchValue("");
            break;
          case 'imageTag':
            this.containerForm.controls.imageTag.patchValue('');
            break;
          default:
            break;
        }
      }
     
     
     
     
      submitForm(formdataReceived) {
        //event.preventDefault();
        console.log("submit" + this.containerForm);         
      }
    }

  14. #14
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut
    Salut, merci ! Mais non ce n'est pas fonctionnel, testé sur stack et de mon côté.
    Dans le stackblitz il va chercher les imageTag dès le début, on le voit dans la console, et en local idem aussi
    Screen : https://prnt.sc/wo05os
    ( je viens de mettre à jour le stack avec ton code)

  15. #15
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    désolé mais ça fonctionne


    J'ai besoin que lorsque j'arrive sur la page, le premier sélecteur soit remplit de contenu, "une liste de nom doit être dedans".
    fonctione !

    Une fois le nom sélectionné, alors une requête HTTP doit être lancé avec le nom sélectionné getTagsOfImage(nomImage) pour récupérer des "tags" et remplir mon deuxième sélecteur.
    fonctione

    Si je supprime le contenu du premier sélecteur :
    - Le premier selecteur doit revenir à l'état initial.
    - Le deuxième sélecteur ne doit contenir aucun valeur ( vu qu'aucune image n'a été selectionnée).
    fonctione

  16. #16
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut
    Sur le stackblitz on à l'impression que ça fonctionne car il n'y a pas de gestion des erreurs http derrière, mais dans la console on voit bien qu'une recherche des tags est lancée alors qu'aucune image n'a été sélectionnée, et c'est ça le problème ( qui génère les erreurs http de mon côté)

    Au chargement de la page, seul le premier selecteur doit faire une recherche, l'autre en aucun cas ne doit effectuer une quelconque action car on a rien selectionné dans le premier selecteur

  17. #17
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    une simple condition :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
      searchTagOfImage(): void{ 
        if (this.containerForm.controls['image'].value != '') {
    
          console.log("searchTagOfImage");
          this.filteredImageTag = this.containerForm.controls.imageTag.valueChanges.pipe(
            startWith(''),
            debounceTime(400),
            distinctUntilChanged(),
            switchMap((val: string) => {
              return this.filterImageTag(val )
            })
          )
        }    
        // }
      }

  18. #18
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut
    Oui, c'est fonctionnel dans le cas d'un chargement de page, les tags ne sont pas recherchés, mais ça ne l'est pas dans le cas ou on a renseigné les champs et que l'on clique sur l'icon supprimer l'image.
    Dans ce cas, il va encore chercher les tags et les images

    (perso je trouve que ce if.. est un hotfix sur quelque chose qui ne se comporte pas normalement)

  19. #19
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    tu enlèves le if.


    c'est rien qu'il va dans searchbidule ...

    mais ce n'est pas normal de lancer une requête qui va merder
    si ça merde c'est que le contenu de l'envoi est vide
    donc dans la fonction tu dois vérifier que la donnée que tu envoi est valide

  20. #20
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut
    C'est bien ça le problème, c'est que le contenu de l'envoi est vide et que la requete part quand même


    Lorsqu'on clique sur l'icon supprimer l'image :

    La requete de recherche des tags part alors qu'on a demandé de patch les value a vide de l'image et du tag !
    Il y a comme un event de select qui est déclenché alors que non, on a patch sans rien selectionner

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. JSF pour générer le contenu d'un courriel
    Par Khaled.Noordin dans le forum JSF
    Réponses: 3
    Dernier message: 29/02/2012, 23h28
  2. Réponses: 11
    Dernier message: 23/04/2009, 17h18
  3. [OpenOffice][Tableur] Comment générer le contenu de cellules
    Par Walterbelo dans le forum OpenOffice & LibreOffice
    Réponses: 3
    Dernier message: 16/03/2009, 05h24
  4. Générer du contenu statique à partir d'une jsp
    Par xtope dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 25/02/2009, 19h14
  5. Contenu d'une liste deroulante en fonction d'une autre
    Par kevain_09 dans le forum VBA Access
    Réponses: 1
    Dernier message: 08/06/2007, 13h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo