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

Version imprimable

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:

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 !

pas sur d'avoir compris fonctionnellement le truc !

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

23/02/2021, 10h18
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.

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

23/02/2021, 13h24
auloma

C’est malheureusement la première solution que j’aie essayée mais elle ne fonctionne pas :/
23/02/2021, 13h57
youtpout978

Ca serait pas mal d'avoir l'html aussi

Le voici, mais je suis pas sur qu'il vous serve à grand chose ... :

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
<div class="details">
    <h1>Session details</h1>
    <div class="computing">
        <h4>Select computing mode:</h4>
        <select [(ngModel)]="computing" (change)="compute()">
            <option value="decimals" selected>Decimals</option>
            <option value="integers">Integers</option>
        </select>
    </div>
    <div class="shotList">
            <table>
                <tr *ngFor="let shot of impacts">
                    <td class="badge">{{shot.id}}: </td>
                    <td> <strong> X:</strong>{{shot.x | number : '1.1-1'}}</td>
                    <td><strong>Y:</strong>{{shot.y | number : '1.1-1'}}</td>
                    <td><strong>Score : </strong>{{shot.score | number : '1.1-1' }}</td>
                </tr>
            </table>
        </div> 
    <div class="score">
        <h4>Your total score :</h4>
        <div class="totalScore">
            {{score}}
        </div>
    </div>
</div>

Je me demande si ça vaut pas le cout de faire un pipe, https://angular.io/guide/pipes

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
@Pipe({ name: 'scoreCompute' })
export class ScoreComputePipe implements PipeTransform {
 
  transform(items: impact[], computing: string): number {
    if (!items) {
      return 0;
    }
 
    var sum = items.reduce((a, b) => a.score + b.score);
    console.log(sum);
    return computing == "integers" ? Math.floor(sum) : parseFloat(sum.toFixed(1));
  }
}

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
<div class="details">
  <h1>Session details</h1>
  <div class="computing">
    <h4>Select computing mode:</h4>
    <select [(ngModel)]="computing">
      <option value="decimals" selected>Decimals</option>
      <option value="integers">Integers</option>
    </select>
  </div>
  <div class="shotList">
    <table>
      <tr *ngFor="let shot of impacts | async">
        <td class="badge">{{shot.id}}: </td>
        <td> <strong> X:</strong>{{shot.x | number : '1.1-1'}}</td>
        <td><strong>Y:</strong>{{shot.y | number : '1.1-1'}}</td>
        <td><strong>Score : </strong>{{shot.score | number : '1.1-1' }}</td>
      </tr>
    </table>
  </div>
  <div class="score">
    <h4>Your total score :</h4>
    <div class="totalScore">
      {{impacts | async | scoreCompute:computing}}
    </div>
  </div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@Component({
  selector: 'app-impacts-list',
  templateUrl: './impacts-list.component.html',
  styleUrls: ['./impacts-list.component.css']
})
export class ImpactsListComponent implements OnInit {
 
  public impacts: Observable<Impact[]>;
  public score: number;
  public computing: string;
 
  constructor(private impactsService: ImpactsService) {
    this.score = 0;
    this.computing = "decimals";
  }
 
  ngOnInit(): void {
    this.impacts = this.impactsService.getImpacts();
  }
}

Que la magie soit, il y a surement quelque truc à modifier je peux pas tester de mon côté

Citation:

Envoyé par auloma

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:

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 ?

23/02/2021, 18h27
auloma

Il n'y a aucun message d'erreur. En fait la variable score n'est juste pas modifiée et reste initialisée à 0.
Les impacts sont parfaitement modifiés, je le vois car une liste d'impacts est mise-à-jour à chaque fois qu'un nouvel impact est reçu.
En revanche la variable score vaut 0 et ne change pas à moins de modifier le select (voir html), qui va appeler a fonction compute(); Cette dernière ne semble même pas être appelée dans le subscribe de getimpacts().
23/02/2021, 19h59
auloma

Citation:

Envoyé par youtpout978

Je me demande si ça vaut pas le cout de faire un pipe, https://angular.io/guide/pipes

Malheureusement il ne m'est pas possible d'utiliser un pipe : j'ai besoin de la somme des parties entières, qui n'est pas égale à la partie entière de la somme :)
23/02/2021, 20h24
krakatoa

Citation:

Envoyé par auloma

Il n'y a aucun message d'erreur. En fait la variable score n'est juste pas modifiée et reste initialisée à 0.
Les impacts sont parfaitement modifiés, je le vois car une liste d'impacts est mise-à-jour à chaque fois qu'un nouvel impact est reçu.
En revanche la variable score vaut 0 et ne change pas à moins de modifier le select (voir html), qui va appeler a fonction compute(); Cette dernière ne semble même pas être appelée dans le subscribe de getimpacts().

et donc les 3 consoles, ça affiche quoi ?
23/02/2021, 20h28
auloma

Cela n'affiche rien, compute ne semble pas être appelée malgré la ligne 28 du code que vous m'avez suggéré

Citation:

Envoyé par auloma

Malheureusement il ne m'est pas possible d'utiliser un pipe : j'ai besoin de la somme des parties entières, qui n'est pas égale à la partie entière de la somme :)

Tu peux reprendre ton code dans le pipe :

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
 
@Pipe({ name: 'scoreCompute' })
export class ScoreComputePipe implements PipeTransform {
 
  transform(items: impact[], computing: string): number {
    if (!items) {
      return 0;
    }
 
	let score=0;
	  if(computing == "integers"){      
      for(var i=0; i<items.length;i++){
        score += Math.floor(items[i].score);
      }
 
    } else {
      for(var i=0; i< items.length;i++){
        score += items[i].score;
      }
      score = parseFloat(score.toFixed(1));
    }  
    console.log(score);
    return score;
  }
}

Merci à tous pour votre aide.
J'ai réussi à m'en sortir avec un subject.

Voici le code de ma solution, au cas où cela pourrait aider quelqu'un :

le service :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
import { Injectable } from '@angular/core';
import { IMPACTS } from './mock-impacts';
import { Impact } from './impact';
import { Observable, of } from 'rxjs';
import { WebSocketSubject } from 'rxjs/webSocket';
import { Subject } from 'rxjs';
 
export interface coordo {
  x:number;
  y:number;
}
 
@Injectable({
  providedIn: 'root'
})
 
export class ImpactsService {
 
  public ws: WebSocketSubject<coordo>;
  private impacts:Impact[];
  public scoreSubject: Subject<number>;
  private port:number = 1234;
 
  constructor() {
    this.scoreSubject = new Subject();
    this.impacts = [];
    this.ws = new WebSocketSubject ('ws://localhost:'+this.port);
    this.ws.subscribe( 
      (message) => {
        var impact:Impact = {
          id:this.impacts.length+1,
          x:message.x,
          y:message.y,
          score:(10.9 - ( Math.sqrt(Math.pow(message.x,2) + Math.pow(message.y,2))))
        }
        if(impact.score < 1.0)
          impact.score = 0.0;
        this.impacts.push(impact);
        this.scoreSubject.next(impact.score);
      },
      (err) => console.error(err)
    );
  }
 
  /**
   * function getImpacts()
   * 
   * returns the impacts array as an observable. 
   * 
   * @returns {Observable<Impact[]>}
   */
  getImpacts():Observable<Impact[]>{
    return of(this.impacts);
  }

Le component :

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
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
 
import { Component, OnInit } from '@angular/core';
import { Impact } from '../impact';
import { ImpactsService } from '../impacts.service';
import { Subscription } from 'rxjs';
 
 
@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;
  public scoreSubscription:Subscription;
  public impactsSubscription:Subscription;
 
  constructor(private impactsService: ImpactsService) {
    this.impacts = [];
    this.score = 0;
    this.computing = "decimals";
    this.scoreSubscription = new  Subscription ();
    this.impactsSubscription = new  Subscription ();
  }
 
  /**
   * function getImpacts()
   * 
   * subscription to the value of the impactsService impacts array. Its value is used to update this.impacts. 
   * 
   * @returns {void}
   */
  getImpacts(): void {
    this.impactsSubscription = this.impactsService.getImpacts().subscribe(impacts => {
      this.impacts = impacts;
    });
  }
 
  /**
   * function getImpacts()
   * 
   * subscription to the impactsService scoreSubject property. The value it emits is added to this.score to update it.
   * 
   * @returns {void}
   */
  getScore ():void {
    this.scoreSubscription = this.impactsService.scoreSubject.subscribe(newScore => {
      if(this.computing == "integers"){
        this.score += Math.floor(newScore);
      } else {
        this.score += newScore;
      }
      this.score = parseFloat(this.score.toFixed(1));
    });
  }
 
  /**
   * function compute()
   * 
   * compute the total score in this.score according to the computing mode contained in this.computing,
   * using the impacts array.
   * This function is called when the user changes the value of the <select< object in the html part of this componnent.
   * 
   * @returns {void}
   */
  compute():void{
    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.getScore();
  }
 
  ngOnDestroy():void{
    this.scoreSubscription.unsubscribe();
    this.impactsSubscription.unsubscribe();
  }
}

Mais j'ai désormais un autre soucis : Lorsque je lance mon projet, il ne se charge pas et j'obtiens l'erreur : "Uncaught Error: Type FormsModule does not have 'ɵmod' property." en console.
Quelqu'a a-t-il déjà eu ce soucis ?

Je suis revenu en arrière de plusieurs commits mais le problème persiste alors que tout fonctionnait jusqu'à maintenant.

24/02/2021, 20h17
dukoid

supprime le dossier : /node_module
npm install
24/02/2021, 20h26
auloma

Ça fonctionne ! 2h que je cherche le soucis ...
Savez-vous d'où cela vient ?
24/02/2021, 21h02
dukoid

en re installant le dossier /node_module ça fonctionne donc ?

je dirais qu'un virus te supprime des fichiers, un defaut du disque dur, une mauvaise manip .... je ne sais pas, les fichiers de ce dossier ne sont jamais modifiés ! étrange....

5 ans d'Angular, ça m'est jamais arrivé !
24/02/2021, 21h03
auloma

Oui ça a parfaitement fonctionné