I， 我会显示可用的小时数，但按时间顺序显示小时数 这是我的模板：
<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>
这是结果：
Lun - 1524434400
la journée est libre
Mar - 1524520800
la journée est libre
Mer - 1524607200
8 - 9
9 - 10
10 - 11
12 - 13 //is note 12 but 11
11 - 12
13 - 14
15 - 16
14 - 15
16 - 17
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
在“mer”中，小时不按顺序排列，因为我使用subscribe：
//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
}
);
});
}
}
有角度5它易于订购吗？我可以在模板中轻松过滤订单？在我的组件？或者我可以使用热管？
感谢您的帮助
答案 0 :(得分：0)
我可能会在后端对数组进行排序，但是如果你想要，你可以在订阅数据后直接在你的前端做这样的事情：
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});
});
// this is where you sort your array of object
this.plageHeure.sort(function(a, b){
return a.afficheH-b.afficheH
})
}
希望这对你有用！
答案 1 :(得分：0)
感谢回复 我试试这个：
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
}
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
}
);
});
}
console.log(this.plageHeure + "UNSORT====");
this.plageHeure.sort(function (a, b) {
return a.afficheH - b.afficheH
});
console.log(this.plageHeure + "====SORT");
}
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;
}
}
我的控制台日志：
array push plageHoraire---------------false heure.component.ts:43:13
journee libre , analyse terminé !!! heure.component.ts:53:9
array push plageHoraire---------------true heure.component.ts:43:13
analyse plage horaire ..... heure.component.ts:61:9
UNSORT==== heure.component.ts:73:9
====SORT heure.component.ts:77:9
array push plageHoraire---------------false
结果是注意排序