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 :

Modification de variable à chaque évolution d'un observable.


Sujet :

Angular

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2020
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2020
    Messages : 63
    Par défaut Modification de variable à chaque évolution d'un observable.
    Bonsoir.
    J'ai implémenté un component qui utilise un observable, modifié par un service.

    J'ai besoin de modifier une variable dès que cet observable évolue. J'ai vu qu'il existait des Subjects et BehaviorSubject mais je n'arrive pas bien à les utiliser sur mon programme.

    Voici mon componnent:

    Code typescript : 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
     
    import { Component, OnInit } from '@angular/core';
    import { Impact } from '../impact';
    import { ImpactsService } from '../impacts.service';
     
     
    @Component({
      selector: 'app-impacts-list',
      templateUrl: './impacts-list.component.html',
      styleUrls: ['./impacts-list.component.css']
    })
    export class ImpactsListComponent implements OnInit {
     
      public impacts :Impact[];
      public score:number;
      public computing:string;
     
      constructor(private impactsService: ImpactsService) {
        this.impacts = [];
        this.score = 0;
        this.computing = "decimals";
      }
     
      getImpacts(): void {
        this.impactsService.getImpacts().subscribe(impacts => this.impacts = impacts);
      }
     
      compute(){
        if(this.computing == "integers"){
          this.score=0;
          for(var i=0; i<this.impacts.length;i++){
            this.score += Math.floor(this.impacts[i].score);
          }
     
        } else {
          this.score=0;
          for(var i=0; i< this.impacts.length;i++){
            this.score += this.impacts[i].score;
          }
          this.score = parseFloat(this.score.toFixed(1));
        }
      }
     
      ngOnInit(): void {
        this.getImpacts();
        this.compute();
      }
    }

    Je souhaite modifier la variable score à chaque évolution de l'observable impacts.
    J'ai essayé de le modifier dans le subscribe de getImpacts(), mais cela ne m'a pas semblé une bonne pratique et cela ne fonctionne de toute façon pas.

    Merci pour votre aide !

  2. #2
    Membre très actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    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
    Par défaut
    pas sur d'avoir compris fonctionnellement le truc !

    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
     
     
    import { Component, OnInit } from '@angular/core';
    import { Impact } from '../impact';
    import { ImpactsService } from '../impacts.service';
     
     
    @Component({
      selector: 'app-impacts-list',
      templateUrl: './impacts-list.component.html',
      styleUrls: ['./impacts-list.component.css']
    })
    export class ImpactsListComponent implements OnInit {
     
      public impacts :Impact[];
      public score:number;
      public computing:string;
     
      constructor(private impactsService: ImpactsService) {
        this.impacts = [];
        this.score = 0;
        this.computing = "decimals";
      }
     
      getImpacts(): void {
        this.impactsService.getImpacts().subscribe(impacts => 
           return this.compute(impacts);
        );
      }
     
      compute(impacts){
        if(this.computing == "integers"){
          this.score=0;
          for(var i=0; i<impacts.length;i++){
            this.score += Math.floor(impacts[i].score);
          }
     
        } else {
          this.score=0;
          for(var i=0; i< impacts.length;i++){
            this.score += impacts[i].score;
          }
          this.score = parseFloat(this.score.toFixed(1));
        }
      }
     
      ngOnInit(): void {
        this.getImpacts();
      }
    }

  3. #3
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2020
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2020
    Messages : 63
    Par défaut
    Malheureusement votre solution ne fonctionne pas :/

    Quelques précisions concernant mon programme :
    - La fonction compute est appelée lors d'une modification apportée à un objet <select>. Elle sert uniquement à modifier la variable score en fonction des valeurs du tableau impacts. Je souhaite donc aussi l'appeler à chaque fois que le tableau impacts est mis-à-jour.
    - L'observable impacts est mis-à- jour via getImpacts(). impacts est aussi un tableau de données appartenant à un service qui est mis-à-jour lorsqu'il en reçoit de nouvelles via un serveur.

  4. #4
    Membre très actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    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
    Par défaut
    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
     
    import { Component, OnInit } from '@angular/core';
    import { Impact } from '../impact';
    import { ImpactsService } from '../impacts.service';
     
     
    @Component({
      selector: 'app-impacts-list',
      templateUrl: './impacts-list.component.html',
      styleUrls: ['./impacts-list.component.css']
    })
    export class ImpactsListComponent implements OnInit {
     
      public impacts :Impact[];
      public score:number;
      public computing:string;
     
      constructor(private impactsService: ImpactsService) {
        this.impacts = [];
        this.score = 0;
        this.computing = "decimals";
      }
     
      getImpacts(): void {
        this.impactsService.getImpacts().subscribe(impacts => 
    {
    this.impacts = impacts
    this.compute();
    }
    );
      }
     
      compute(){
        if(this.computing == "integers"){
          this.score=0;
          for(var i=0; i<this.impacts.length;i++){
            this.score += Math.floor(this.impacts[i].score);
          }
     
        } else {
          this.score=0;
          for(var i=0; i< this.impacts.length;i++){
            this.score += this.impacts[i].score;
          }
          this.score = parseFloat(this.score.toFixed(1));
        }
      }
     
      ngOnInit(): void {
        this.getImpacts();
        this.compute();
      }
    }

  5. #5
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2020
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2020
    Messages : 63
    Par défaut
    C’est malheureusement la première solution que j’aie essayée mais elle ne fonctionne pas :/

  6. #6
    Membre Expert

    Homme Profil pro
    Développeur .NET
    Inscrit en
    Novembre 2010
    Messages
    2 067
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Novembre 2010
    Messages : 2 067
    Par défaut
    Ca serait pas mal d'avoir l'html aussi

  7. #7
    Membre très actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    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
    Par défaut
    Citation Envoyé par auloma Voir le message
    C’est malheureusement la première solution que j’aie essayée mais elle ne fonctionne pas :/
    le message d'erreur ? qu'est ce qui ne fonctionne pas ?


    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
     
    import { Component, OnInit } from '@angular/core';
    import { Impact } from '../impact';
    import { ImpactsService } from '../impacts.service';
     
     
    @Component({
      selector: 'app-impacts-list',
      templateUrl: './impacts-list.component.html',
      styleUrls: ['./impacts-list.component.css']
    })
    export class ImpactsListComponent implements OnInit {
     
      public impacts :Impact[];
      public score:number;
      public computing:string;
     
      constructor(private impactsService: ImpactsService) {
        this.impacts = [];
        this.score = 0;
        this.computing = "decimals";
      }
     
      getImpacts(): void {
        this.impactsService.getImpacts().subscribe(impacts => 
    {
    this.impacts = impacts
    this.compute();
    }
    );
      }
     
      compute(){
     
    console.log('impacts', this.impacts)
     
        if(this.computing == "integers"){
          this.score=0;
          for(var i=0; i<this.impacts.length;i++){
            this.score += Math.floor(this.impacts[i].score);
          }
     console.log('integers', this.score )
        } else {
          this.score=0;
          for(var i=0; i< this.impacts.length;i++){
            this.score += this.impacts[i].score;
          }
          this.score = parseFloat(this.score.toFixed(1));
     console.log('else ', this.score )
        }
      }
     
      ngOnInit(): void {
        this.getImpacts();
        this.compute();
      }
    }
    ça donne quoi les console.log ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. modification de variable d'environnement (PS1)
    Par trax44 dans le forum Administration système
    Réponses: 3
    Dernier message: 28/05/2007, 17h52
  2. modification de variable
    Par sloshy dans le forum Général Python
    Réponses: 4
    Dernier message: 04/03/2007, 22h33
  3. modification des variables difine dans un movieclip
    Par 3adoula dans le forum Flash
    Réponses: 1
    Dernier message: 21/08/2006, 18h19
  4. [Tableaux] Suivre les modifications faits par chaque utilisateur
    Par dessinateurttuyen dans le forum Langage
    Réponses: 7
    Dernier message: 19/07/2006, 10h05
  5. Réponses: 3
    Dernier message: 01/09/2005, 11h56

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