Affichage dans une boucle *ngFor

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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:

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:

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:

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:

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
Pièce jointe 593782

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

(1) teammate-view.ts

Code:

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:

1
2
 
teammates = {{teammates | json}}

qu'affiche la vue ?

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

Code:

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:

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:

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>

19/03/2021, 15h41
angie13003

4 pièce(s) jointe(s)

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
Pièce jointe 593790
Pièce jointe 593794

Pour la 2 j'ai uniquement le nom de la variable
Pièce jointe 593793

Pour la 3 et la 4 il y a plus rien qui s'affiche
Pièce jointe 593795

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.
19/03/2021, 15h52
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:

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:

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)
19/03/2021, 16h57
angie13003

2 pièce(s) jointe(s)

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.

Pièce jointe 593801

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

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

Code:

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

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 ?

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:

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

19/03/2021, 17h18
krakatoa
dans la console, tu confirmes que emit et teamates affiche les données !

dans la vue, teste ça:
Code:

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:

1 2 3 4 5 ngOnInit(): void { la souscription .... l'emission ... }
19/03/2021, 17h25
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:

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

il y a commence à avoir des résultats.

j'ai donc fait ce code :
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 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.

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

Code:

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

Alors quand je rentre le code suivant :

Code:

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

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

Citation:

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:

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