Discussion :

[angie13003]

Bonjour,

Je ne comprend pas j'effectuer une boucle pour afficher un tableau à l'aide de ngFor, mais rienne s'affiche et je n'ai aucune erreur.

Voici mon code

Fichier teammates.model.ts

Code :

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

1
2
3
4
export class Teammate {
 
  constructor(public action: string, public firstNameTeammate: string, public lastNameTeammate: string, public usernameTeammate: string, public mailTeammate: string, public phoneTeammate: string, public password: string, public statusTeammate: string, public jobTeammate: string, public locationAgency: string, public superAdmin: boolean, public dateTeammate?: string, public idTeammate?: number) {}
}

Fichier teammate.service.ts

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
import { Teammate } from '../models/teammates.model';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
 
@Injectable({
  providedIn: 'root'
})
export class TeammateService {
 
  teammateSubject = new Subject<Teammate[]>();
  private teammates: Teammate[] = [
    {
      action: 'edit',
      firstNameTeammate: 'angie',
      lastNameTeammate: 'test',
      usernameTeammate: 'test2',
      mailTeammate: 'tot@to.com',
      phoneTeammate: '0000000000',
      password: 'test',
      statusTeammate: 'Activer',
      jobTeammate: 'Manager',
      locationAgency: 'Marseille',
      superAdmin: true
    }
  ];
 
  constructor() { }
 
  emitTeammateSubject(): void {
    this.teammateSubject.next(this.teammates.slice());
  }
 
  addTeammate(teammate: Teammate): void {
    this.teammates.push(teammate);
    this.emitTeammateSubject();
  }
 
  getTeammateById(idTeammate: number): any {
    const teammate = this.teammates.find(
      (teammateObject) => {
        return teammateObject.idTeammate === idTeammate;
      }
    );
    return teammate;
  }
 
  switchTeammateActivate(index: number): void {
    this.teammates[index].action = 'editTeamate';
    this.teammates[index].statusTeammate = 'Activer';
    this.emitTeammateSubject();
  }
 
  switchNoTeammate(index: number): void {
 
    this.teammates[index].statusTeammate = 'Désactiver';
    this.emitTeammateSubject();
  }
 
}

Fichier teammate-view.ts

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
import { Teammate } from '../models/teammates.model';
import { TeammateService } from './../services/teammate.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
 
@Component({
  selector: 'app-teammate-view',
  templateUrl: './teammate-view.component.html',
  styleUrls: ['./teammate-view.component.css']
})
export class TeammateViewComponent implements OnInit, OnDestroy {
 
  teammates: Teammate[];
  teammateSubscription: Subscription;
 
  constructor(private teammateService: TeammateService) { }
 
  ngOnInit(): void {
    this.teammateSubscription = this.teammateService.teammateSubject.subscribe(
      (teammates: Teammate[]) => {
        this.teammates = teammates;
      })
  }
 
  ngOnDestroy(): void {
    this.teammateSubscription.unsubscribe();
  }
}

fichier teammate-view.html

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
<div class="row mt-5 mb-5 pt">
  <div class="text-center col-9">
      <h2>Liste des salariés</h2>
  </div>
  <div class="text-right col-3">
      <button style="font-size: 15px;" routerLink="/addTeammate">Ajouter un salarié</button>
  </div>
</div>
 
<div class="container">
  <app-teammate *ngFor="let teammate of teammates; let i = index" [action]="teammate.action" [IndexOfTeammate]="i" [idTeammate]="teammate.idTeammate" [firstNameTeammate]="teammate.firstNameTeammate" [lastNameTeammate]="teammate.lastNameTeammate" [usernameTeammate]="teammate.usernameTeammate" [mailTeammate]="teammate.mailTeammate"
  [phoneTeammate]="teammate.phoneTeammate" [password]="teammate.password" [statusTeammate]="teammate.statusTeammate" [jobTeammate]="teammate.jobTeammate" [locationAgency]="teammate.locationAgency" [superAdmin]="teammate.superAdmin" [dateTeammate]="teammate.dateTeammate">
  </app-teammate>
</div>

fichier teammate.ts

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
import { Component, Input, OnInit } from '@angular/core';
import { TeammateService } from './../../services/teammate.service';
import { Teammate } from '../../models/teammates.model';
 
@Component({
  selector: 'app-teammate',
  templateUrl: './teammate.component.html',
  styleUrls: ['./teammate.component.css']
})
export class TeammateComponent implements OnInit {
 
  @Input() IndexOfTeammate: number;
  @Input() action: string;
  @Input() idTeammate: number;
  @Input() firstNameTeammate: string;
  @Input() lastNameTeammate: string;
  @Input() usernameTeammate: string;
  @Input() mailTeammate: string;
  @Input() phoneTeammate: string;
  @Input() password: string;
  @Input() statusTeammate: string;
  @Input() jobTeammate: string;
  @Input() locationAgency: string;
  @Input() superAdmin: boolean;
  @Input() dateTeammate: string;
 
  teammates: Teammate[];
 
  constructor(private teammateService: TeammateService) { }
 
  ngOnInit(): void {
  }
 
  getStatusTeammate(): string {
    return this.statusTeammate;
  }
 
  getOpacityTeammate(): 1| 0.5 {
    if (this.statusTeammate === 'Activer') {
      return 1;
    } else if (this.statusTeammate === 'Désactiver') {
      return 0.5;
    }
  }
 
  getColorTeammate(): 'black' | '#A7A7A7' {
    if (this.statusTeammate === 'Activer') {
      return 'black';
    } else if (this.statusTeammate === 'Désactiver') {
      return '#A7A7A7';
    }
  }
 
  onSwitchTeammate(): void {
    this.teammateService.switchTeammateActivate(this.IndexOfTeammate);
  }
 
  onSwitchNoTeammate(): void {
    this.teammateService.switchNoTeammate(this.IndexOfTeammate);
  }
 
}

fichier teammate.html

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
27
28
29
30
31
32
33
<div class="row list-group list-group-flush d-flex flex-row" [ngClass]="{'list-group-item': true, 'success': statusTeammate === 'Activer', 'failure': statusTeammate === 'Désactiver'}" [ngStyle]="{ opacity: getOpacityTeammate() }">
  <div class="col-1 m-auto">
      <img src="../../../assets/images/profile.png">
  </div>
  <div class="col-7 d-flex flex-row">
      <div class="m-auto">
          <p class="m-auto p-2 info" [ngStyle]="{ color: getColorTeammate() }"><span>Prénom : </span>{{ lastNameTeammate }}</p>
      </div>
      <div class="m-auto">
          <p class="m-auto p-2 info" [ngStyle]="{ color: getColorTeammate() }"><span>Identifiant : </span>{{ usernameTeammate }}</p>
      </div>
      <div class="m-auto">
          <p class="m-auto p-2 info" [ngStyle]="{ color: getColorTeammate() }"><span>Mot de passe : </span>{{ password }}</p>
      </div>
      <div class="m-auto">
        <p class="m-auto p-2 info" [ngStyle]="{ color: getColorTeammate() }"><span>Poste : </span>{{ jobTeammate }}</p>
    </div>
  </div>
  <div class="col-4 d-flex flex-row">
      <div class="m-auto">
          <a [routerLink]="[idTeammate]" class="mr-3 plus" *ngIf="statusTeammate === 'Activer'">Détails</a>
      </div>
      <div class="m-auto">
          <button style="font-size: 12px;" (click)="onSwitchTeammate()" *ngIf="statusTeammate === 'Désactiver'">Activer</button>
      </div>
      <div class="m-auto">
          <button style="font-size: 12px; background-color: #b1b1b1; border: #b1b1b1;" (click)="onSwitchNoTeammate()" *ngIf="statusTeammate === 'Activer'">Désactiver</button>
      </div>
      <div class="m-auto">
          <!-- <button style="font-size: 12px;" (click)="onDeleteTeammate(idTeammate)">Supprimer</button> -->
      </div>
  </div>
</div>

Voici ce que j'ai à l'écran


je ne trouve pas d'où vient mon erreur est il possible de m'aider svp?

[krakatoa]

(1) teammate-view.ts

Code :

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

1
2
3
4
5
6
7
8
9
 
  ngOnInit(): void {
    this.teammateSubscription = this.teammateService.teammateSubject.subscribe(
      (teammates: Teammate[]) => {
 
console.log('teammates', teammates);
        this.teammates = teammates;
      })
  }

qu'affiche la console ?


(2) teammate-view.html

Code :

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

1
2
 
teammates = {{teammates | json}}

qu'affiche la vue ?

(3) tu peux tester avec ça : j'ai ajouté : *ngIf="teammates"

Code html :

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

1
2
3
4
5
6
7
<div *ngIf="teammates" class="container">
  <app-teammate *ngFor="let teammate of teammates; let i = index" [action]="teammate.action" [IndexOfTeammate]="i" [idTeammate]="teammate.idTeammate" [firstNameTeammate]="teammate.firstNameTeammate" [lastNameTeammate]="teammate.lastNameTeammate" [usernameTeammate]="teammate.usernameTeammate" [mailTeammate]="teammate.mailTeammate"
  [phoneTeammate]="teammate.phoneTeammate" [password]="teammate.password" [statusTeammate]="teammate.statusTeammate" [jobTeammate]="teammate.jobTeammate" [locationAgency]="teammate.locationAgency" [superAdmin]="teammate.superAdmin" [dateTeammate]="teammate.dateTeammate">
  </app-teammate>
 
  teammates = {{teammates | json}}
</div>

---------------------------------------------------------------------------------------------------------------
autre chose :

Code :

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

1
2
3
4
<app-teammate *ngFor="let teammate of teammates; let i = index" [teammate]="teammate"  [IndexOfTeammate]="i"></app-teammate>
....
@Input() teammate: Teammate;
@Input() IndexOfTeammate: number;

au lieu de :

Code html :

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

1
2
3
<app-teammate *ngFor="let teammate of teammates; let i = index" [action]="teammate.action" [IndexOfTeammate]="i" [idTeammate]="teammate.idTeammate" [firstNameTeammate]="teammate.firstNameTeammate" [lastNameTeammate]="teammate.lastNameTeammate" [usernameTeammate]="teammate.usernameTeammate" [mailTeammate]="teammate.mailTeammate"
  [phoneTeammate]="teammate.phoneTeammate" [password]="teammate.password" [statusTeammate]="teammate.statusTeammate" [jobTeammate]="teammate.jobTeammate" [locationAgency]="teammate.locationAgency" [superAdmin]="teammate.superAdmin" [dateTeammate]="teammate.dateTeammate">
  </app-teammate>

[angie13003]

Salut krakatoa,

alors voici mes tests par rapport à tes solutions proposé :

Pour la 1 en ajoutant console.log dans le code, il y a rien qui s'affiche



Pour la 2 j'ai uniquement le nom de la variable



Pour la 3 et la 4 il y a plus rien qui s'affiche



Ce qui me rend fou c'est que j'ai déjà utilisé ce système de code plein de fois et j'ai jamais eu de problème. Et là ça marche pas, je suis sûre que c'est un problème tout simple mais je n'arrive pas à trouver où ça fait 2 jours que je bloque là dessus.

[krakatoa]

à partir du moment ou le (1) ne donne rien, les autres points ne fonctionneront pas !
faut pas hésiter à mettre des console.log et remonter ... test après test ... remonter jusqu'à la source

donc en remontant, il y a le emit, voyons :

Code :

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

1
2
3
4
  emitTeammateSubject(): void {
    this.teammateSubject.next(this.teammates.slice());
  }

déjà, le .slice() n'a pas lieu d'être !

essaye ça :

Code :

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

1
2
3
4
5
 
  emitTeammateSubject(): void {
console.log('emit', this.teammates);
    this.teammateSubject.next(this.teammates);
  }

est ce que tu obtiens quelque chose avec la console 'emit' ?

(faut laisser : *ngIf="teammates" parceque c'est des données asynchrones)

[angie13003]

Merci pour ton aide.

Alors c'est trop bizarre car quand je met le code que tu m'as dit, lors de la compilation il y a rien qui s'affiche.



mais des que je click sur n'importe quel lien ou bouton, cela s'affiche dans ma console.


alors que de base je voudrais que ça s'affiche directe.
Je suis perdu

[krakatoa]

Code html :

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

<button style="font-size: 12px;" (click)="onSwitchTeammate()" *ngIf="statusTeammate === 'Désactiver'">Activer</button>

(click)="onSwitchTeammate()" --> donc, à chaque clic, si tu regardes la fonction, il déclenche le émit !



et donc, du coup

Code :

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

1
2
3
4
5
6
7
8
 ngOnInit(): void {
    this.teammateSubscription = this.teammateService.teammateSubject.subscribe(
      (teammates: Teammate[]) => {
 
console.log('teammates', teammates);
        this.teammates = teammates;
      })
  }

dans la console, ça devrait fonctionner, on devrait avoir : 'teammates', non ?

[angie13003]

en effet, moi je voudrais que ma liste s'affiche dès le chargement de ma page, mais là rien ne s'affiche même pas dans la console.

et dès que je clique sur le bouton ajouter un salarié ou sur mes liens du menu (qui font pas de fonction) à ce moment là sa s'affiche uniquement dans ma console. Mais toujours rien ne s'affiche sur ma page.

Et quand je met uniquement ce morceau de code

Code :

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

1
2
3
4
5
6
7
8
9
 
ngOnInit(): void {
    this.teammateSubscription = this.teammateService.teammateSubject.subscribe(
      (teammates: Teammate[]) => {
 
console.log('teammates', teammates);
        this.teammates = teammates;
      })
  }

Rien ne s'affiche dans ma console

[krakatoa]

dans la console, tu confirmes que emit et teamates affiche les données !


dans la vue, teste ça:

Code html :

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

1
2
3
<div *ngIf="teammates">
  teammates = {{teammates | json}}
</div>

si tu veux que cela se declence à l'affichage de la page
il faut faire le émit dans ngOnInit

Code :

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

1
2
3
4
5
ngOnInit(): void {
 
la souscription ....
l'emission ...
}

[krakatoa]

désolé j'ai oublié un détail

utilise : BehaviorSubject au lieu de Subject
et ça devrait fonctionner !

exemple:
on l'initialise avec un tableau vide: []
ensuite l'émission enverra les données !

Code :

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

1
2
3
4
 
import { BehaviorSubject } from 'rxjs';
 
const subject = new BehaviorSubject([]);

sur un subjet :
si tu emets
et ensuite tu souscris
alors tu ne recevra jamais les données car tu as souscris apres l'émission, tu as souscrit trop tard.


avec BehaviorSubject
meme si tu souscris après, il te renverra toujours la dernière émission !

faut le voir comme des flux, et des instants ou sont émises les données sur le flux.
et chaque type de subject ont des caractéristiques differentes

[angie13003]

il y a commence à avoir des résultats.

j'ai donc fait ce code :

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
 
 
import { Teammate } from '../models/teammates.model';
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
 
@Injectable({
  providedIn: 'root'
})
export class TeammateService {
 
  teammateSubject = new BehaviorSubject([]);
  private teammates: Teammate[] = [
    {
      action: 'edit',
      firstNameTeammate: 'angie',
      lastNameTeammate: 'test',
      usernameTeammate: 'test2',
      mailTeammate: 'tot@to.com',
      phoneTeammate: '0000000000',
      password: 'test',
      statusTeammate: 'Activer',
      jobTeammate: 'Manager',
      locationAgency: 'Marseille',
      superAdmin: true
    }
  ];
 
  constructor() { }
 
  emitTeammateSubject(): void {
    console.log('emit', this.teammates);
    this.teammateSubject.next(this.teammates);
  }

Lorsque je compile mon projet et que je vais sur la page teammate (Management) il y a rien que s'affiche au niveau de la liste des salariés
uniquement le console.log (teammate) qui m'affiche un tableau vide


Et lorsque que je clique sur le lien Management (qui est rattaché à zéro fonction), les 2 console.log m'affiche mon tableau

Mais j'ai toujours pas ma liste qui s'affiche dès le début sur ma page.

[krakatoa]

essayes avec ça, si ça fonctionne c'est que tu n'emets pas de la bonne façon !

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
 
ngOnInit() { 
...
...
 this....le service..teammateSubject.next(
[
    {
      action: 'edit',
      firstNameTeammate: 'angie',
      lastNameTeammate: 'test',
      usernameTeammate: 'test2',
      mailTeammate: 'tot@to.com',
      phoneTeammate: '0000000000',
      password: 'test',
      statusTeammate: 'Activer',
      jobTeammate: 'Manager',
      locationAgency: 'Marseille',
      superAdmin: true
    }
  ]
);

[angie13003]

Alors quand je rentre le code suivant :

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
 
 
  ngOnInit(): void {
    this.teammateService.teammateSubject.next(
      [
        {
          action: 'edit',
          firstNameTeammate: 'angie',
          lastNameTeammate: 'test',
          usernameTeammate: 'test2',
          mailTeammate: 'tot@to.com',
          phoneTeammate: '0000000000',
          password: 'test',
          statusTeammate: 'Activer',
          jobTeammate: 'Manager',
          locationAgency: 'Marseille',
          superAdmin: true
        }
      ]
    );
    console.log('teammates', this.teammates);
  }

Il y a rien du tout qui s'affiche ni dans la console ni sur ma page

[krakatoa]

j'ai testé de mon coté et j'obtiens bien un affichage dans la vue

teammates = [ { "action": "edit", "firstNameTeammate": "angie", "lastNameTeammate": "test", "usernameTeammate": "test2", "mailTeammate": "tot@to.com", "phoneTeammate": "0000000000", "password": "test", "statusTeammate": "Activer", "jobTeammate": "Manager", "locationAgency": "Marseille", "superAdmin": true } ]

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
 
  ngOnInit(): void {
 
    this.teammateSubscription = this.teammateService.teammateSubject.subscribe((teammates: Teammate[]) => {
 
      console.log('teammates', teammates);
      this.teammates = teammates;
    })
 
 
 
    this.teammateService.teammateSubject.next(
      [
        {
          action: 'edit',
          firstNameTeammate: 'angie',
          lastNameTeammate: 'test',
          usernameTeammate: 'test2',
          mailTeammate: 'tot@to.com',
          phoneTeammate: '0000000000',
          password: 'test',
          statusTeammate: 'Activer',
          jobTeammate: 'Manager',
          locationAgency: 'Marseille',
          superAdmin: true
        }
      ]
    );
}