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

[auloma]

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

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
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>

[youtpout978]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 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
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 :

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
@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é

[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 ?

[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().

[auloma]

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

[krakatoa]

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 ?

[auloma]

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

[youtpout978]

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 :

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
 
@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;
  }
}

[auloma]

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 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
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 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
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.

[dukoid]

supprime le dossier : /node_module
npm install

[auloma]

Ça fonctionne ! 2h que je cherche le soucis ...
Savez-vous d'où cela vient ?

[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é !

[auloma]

Oui ça a parfaitement fonctionné