bonsoir, je souhaite trier dans ma vue les plages d'horaires, mais je ne sais pas comment le faire correctement,
voici mon composant:

Code javascript : 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
96
97
98
99
import { Component, OnInit } from '@angular/core';
import { CalendarModel } from '../calendar-model';
import { Injectable } from '@angular/core';
import { SemaineComponent } from '../semaine/semaine.component';
import { CalendarService } from '../calendar.service';
 
@Injectable()
 
@Component({
  selector: 'app-heure',
  templateUrl: './heure.component.html',
  styleUrls: ['./heure.component.css']
})
 
export class HeureComponent implements OnInit {
 
  parTranche: number = 3600; //par tranche d'une heure 3600 seconde
  trancheDeb: number = 8;//la journée commence à 8H
  trancheFin: number = 17;//la journée se termine à 17H
 
  plageJour = this.trancheFin - this.trancheDeb;
  plageHeure = new Array();// = this._semaine.courrantSemaine; si elle est vide pas d'affichage avec ngIf != 0
 
  debJ0H;//sauvegarde le jour J
  finJour;//fin de la journée
 
  constructor(private _calendar: CalendarModel, private _semaine: SemaineComponent, private _calendarService: CalendarService) {
    this.debJ0H = this._semaine.courrantSemaine[this._semaine.iBoucle];
    //console.log("0=>" + this._semaine.iBoucle);
 
    let resultat;
    this.isDayFree();//est ce que dans la journé il y a des RDV ?
    this._semaine.iBoucle++;//important d'ajouter cette incrémentation
    console.log(this.plageHeure + "UNSORT====");
 
    this.plageHeure.sort(function (a, b) {
      return a.afficheH - b.afficheH
    });
    console.log(this.plageHeure + "====SORT");
  }
 
  ngOnInit() {
 
  }
 
  isDayFree()//on vérifie si la journée est libre si true toute la journée dispo, si false on scan toutes les plage
  {
    //console.log(this._semaine.iBoucle + "==>" + this.debJ0H['debJour0H']);
    this.debJ0H['debJour0H'] + this.trancheDeb * this.parTranche; //le début de la journée
    this.finJour = this.debJ0H['debJour0H'] + this.trancheFin * this.parTranche; //on ajouter la fin de la journée pour toucheFin
    //console.log("DEBUT J=>" + this.debJ0H['debJour0H'] + "FIN J =>" + finJour);
    this._calendarService.dispoWbsRdv(this.debJ0H['debJour0H'], this.finJour).subscribe(data => {
      //on récupère les rendez-vous s'il y en a, s'il y en a pas il sera filtré avec le ngIF = 0
      console.log("array push plageHoraire---------------" + data);
      //data = false;
      //data = true la journée est libre, data = false la journée est pris afficher les plages d'horaire
      data ? this.plageHoraire() : this.pushFalse();//data = false journée dispo on passe à la suivante, data = true il faut analyser la journée
      //on affiche les plages d'horaires de la journée
      //  this._semaine.iBoucle++;//important d'ajouter cette incrémentation
    }, (error) => {
    });
  }
 
  pushFalse(): void {
    console.log("journee libre  , analyse terminé !!!");
    this.plageHeure.push(
      {
        "afficheH": this.trancheDeb, "unavailable": false //on check si une des plage son indiponible
      }
    );
 
  }
 
  //on décompose la plage sur une journée en paramètre l'indice de chaque jour dans _semaine courrantSemaine
  plageHoraire(): void {
    console.log("analyse plage horaire .....");
    for (let i = 0; i < this.plageJour; i++) { //i est le cran
      this.isPlageReserver(this.debJ0H['debJour0H'], i).subscribe(data => {
        this.plageHeure.push(
          {
            "afficheH": this.trancheDeb + i, "unavailable": data //on check si une des plage son indiponible
          }
        );
      });
    }
 
  }
 
  isPlageReserver(debutJ0, cran) {//debutJO est le timestamps du jours à 0H qu'on test , cran et la tranche d'1 heure
    //timestamps depart = debut jour à 0H + démarrage journée 8H + la tranche d'heure x 1H   
    let debutPlage = debutJ0 + (this.trancheDeb * this.parTranche) + (cran * this.parTranche);
    //timestamp final = debutPlage + la tranche d'heure de la plage de la journée
    let finPlage = debutPlage + this.parTranche; //la fin de la tranche et le début de la tranche + la tranche ici 1H
    //console.log(cran+"DEB=>" + debutPlage + "***FIN=>" + finPlage);
    return this._calendarService.dispoWbsRdv(this.debJ0H['debJour0H'], this.finJour);
    //return true;
  }
 
}

Le résultat de ma vue
Code javascript : 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
fil de la semaine
Mar - 1524520800
 
    la journée est libre
 
Mer - 1524607200
 
    8 - 9
    9 - 10
    10 - 11
    11 - 12
    13 - 14//doit être à 12 -13
    12 - 13
    16 - 17
    15 - 16
    14 - 15
 
Jeu - 1524693600
 
    la journée est libre
 
Ven - 1524780000
 
    la journée est libre
 
Sam - 1524866400
 
    la journée est libre
 
Dim - 1524952800
 
    la journée est libre
 
Lun - 1525039200
 
    la journée est libre
j'obtiens mes heures comme ceci:
je prends juste afficheH, et j'ajoute 1 pour avoir ma plage horaire,
le but est donc uniquement heure.trier afficheH
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
 {{heure.afficheH}} - {{heure.afficheH + 1}}


voici ma vue en html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
<ul>
    <li class="heure" *ngFor="let heure of plageHeure" [ngClass]="{ odd: (heure%2 == 0), even: heure %2 == 1 } ">
        <a *ngIf="heure.unavailable==true" [ngClass]="{ red : heure.unavailable }">
            {{heure.afficheH}} - {{heure.afficheH + 1}}
        </a>
        <a *ngIf="heure.unavailable==false" [ngClass]="{ red : heure.unavailable }">
            la journée est libre
        </a>
    </li>
</ul>

les plages d' horaires ne sont pas trié par ordre chronologique, je pense que c'est du à la réception aléatoire des résultats.

j'ai essayer cela,mais cela n'a pas fonctionné:

Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
    console.log(this.plageHeure + "UNSORT====");
 
    this.plageHeure.sort(function (a, b) {
      return a.afficheH - b.afficheH
    });
    console.log(this.plageHeure + "====SORT");

mes console.log:

Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
array push plageHoraire---------------true

comment je dois m'y prendre pour trier correctement mes plages horaires ? merci d'avance pour vos idées.