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?