Discussion :

[auloma]

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 !

[krakatoa]

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();
  }
}

[auloma]

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.

[krakatoa]

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();
  }
}

[auloma]

C’est malheureusement la première solution que j’aie essayée mais elle ne fonctionne pas :/

[youtpout978]

Ca serait pas mal d'avoir l'html aussi

[krakatoa]

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 ?