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 ?