问题
Joueur-Firebase
import { Component, OnInit, Output ,HostBinding, OnDestroy} from '@angular/core';
import { Router } from '@angular/router';
import { Joueur } from '../models/joueur.model';
import { Match } from '../models/match.model';
import { JoueurService } from '../services/joueur.service';
import { Subscription } from 'rxjs';
import * as firebase from 'Firebase';
@Component({
selector: 'app-classement',
templateUrl: './classement.component.html',
styleUrls: ['./classement.component.scss']
})
export class ClassementComponent implements OnInit, OnDestroy
{
matchClassement: Match[]
joueurClassement: Joueur[]
@Output() PouleClassement: any;
classementSubscription: Subscription;
matchSubscription: Subscription;
match: Match;
constructor(private joueurService: JoueurService, private router: Router) { }
ngOnInit() {
this.classementSubscription = this.joueurService.classementSubject.subscribe(
(joueurClassement: Joueur[]) => {
this.joueurClassement = joueurClassement;
}
);
this.PouleClassement = this.joueurService.getPoule();
this.joueurService.getPouleClassement(this.PouleClassement);
this.joueurService.emitJoueurClassement();
// tri du tableau
console.table(this.joueurClassement)
const sortByMapped = (map,compareFn) => (a,b) => compareFn(map(a),map(b));
const byValue = (a,b) => b - a;
const toPoint = e => e.point;
const byPoint = sortByMapped(toPoint,byValue);
this.joueurClassement.sort(byPoint)
this.matchSubscription = this.joueurService.matchSubject.subscribe(
(matchClassement: Match[]) => {
this.matchClassement = matchClassement;
}
);
this.joueurService.getMatch(this.PouleClassement);
this.joueurService.emitMatch();
}
onBack() {
this.router.navigate(['/poules']);
}
onCreatMatch(poule: any) {
//var P = 1;
var TabIndexe = new Array
var NumMatch = 0;
this.match = new Match(0,'','',0,'','',0);
// fabrication du tableau d'indexe
var i = 0;
for ( let J1 in this.joueurClassement ){
TabIndexe[i] = J1;
i ++;
}
console.table(TabIndexe)
// creation des matchs
var P1 = 0;
var P2 = 1 ;
console.table(this.joueurClassement)
while ( P1 < TabIndexe.length ){
while (P2< TabIndexe.length ){
var ind = TabIndexe[P1]
var ind1 = TabIndexe[(P2)]
this.match.numMatch = NumMatch
this.match.joueur1 = this.joueurClassement[ind].nom;
this.match.prenom1 = this.joueurClassement[ind].prenom;
this.match.joueur2 = this.joueurClassement[ind1].nom;
this.match.prenom2 = this.joueurClassement[ind1].prenom;
this.match.point1 = 0;
this.match.point2 = 0;
console.log( this.match.numMatch + this.match.joueur1 + this.match.joueur2 )
firebase.database().ref('/poule' + poule + '/' + NumMatch ).set(this.match);
P2++
NumMatch++
}
P1++
P2 = P1 + 1
}
}
ngOnDestroy(){
this.classementSubscription.unsubscribe();
}
onSaveMatch(poule,numMatch,joueur1,joueur2){
this.joueurService.setPoule(poule);
this.joueurService.setMatch(numMatch,joueur1,joueur2)
this.router.navigate(['/classement/match']);
}
trackKeyValuePair(_index, keyValuePair): number {
return keyValuePair.key;
}
}import { Injectable } from '@angular/core';
import {Joueur} from '../models/joueur.model';
import {Match} from '../models/match.model';
import { Subject } from 'rxjs';
import * as firebase from 'Firebase';
@Injectable({
providedIn: 'root'
})
export class JoueurService {
match: Match[] = [];
joueur: Joueur[] = [];
joueurClassement: Joueur[] = [];
joueurSubject = new Subject<Joueur[]>();
matchSubject = new Subject<Match[]>();
classementSubject = new Subject<Joueur[]>();
constructor() { }
emitJoueur() {
this.joueurSubject.next(this.joueur);
}
emitJoueurClassement() {
this.classementSubject.next(this.joueurClassement);
}
emitMatch() {
this.matchSubject.next(this.match);
}
saveJoueur(){
firebase.database().ref('/joueurs').set(this.joueur);
}
getJoueur(){
firebase.database().ref('/joueurs').on('value', (data) => {
this.joueur = data.val() ? data.val() : [] ;
this.emitJoueur();
});
}
getSingleJoueur(id: number){
return new Promise(
(resolve, reject) => {
firebase.database().ref( '/joueurs/' + id).once('value').then(
(data) =>{
resolve(data.val());
}
,(error) =>{
reject(error);
}
);
}
);
}
creatNewJoueur(newJoueur: Joueur , poule){
this.joueur.push(newJoueur);
this.saveJoueur();
this.emitJoueur();
}
removeJoueur(joueur: Joueur){
const JoueurIndexToRemove = this.joueur.findIndex(
(joueurEl) => {
if(joueurEl === joueur){
return true;
}
}
);
this.joueur.splice(JoueurIndexToRemove,1);
this.saveJoueur();
this.emitJoueur();
}
getPouleClassement(poule: any){
console.log("Service = getPouleClassement" + poule );
firebase.database().ref('/joueurs').orderByChild('poule')
.equalTo(poule)
.on("value", (data) => {
this.joueurClassement= (data.val() ? data.val() : []);
this.emitJoueurClassement();
});
}
// sauvegarde et transmission
Poule: any;
setPoule(poule){
this.Poule =poule;
}
//et transmission du numero de poule
getPoule(){
let PouleClassement = this.Poule;
this.clearData();
return PouleClassement;
}
// sauvegarde et transmission
nummatch: any;
joueur1: any;
joueur2: any;
setMatch(nummatch,joueur1,joueur2){
this.nummatch =nummatch;
this.joueur1 =joueur1;
this.joueur2 =joueur2;
}
//et transmission
getNumMatch(){
let NumMatch = this.nummatch;
this.clearData1()
return NumMatch;
}
getJoueur1(){
let Joueur1 = this.joueur1;
this.clearData2();
return Joueur1;
}
getJoueur2(){
let Joueur2 = this.joueur2;
this.clearData3();
return Joueur2;
}
clearData(){
this.Poule = undefined;
}
clearData1(){
this.nummatch = undefined;
}
clearData2(){
this.joueur1 = undefined;
}
clearData3(){
this.joueur2 = undefined;
}
getMatch(poule) {
firebase.database().ref('poule'+ poule).on('value', (data) => {
this.match = data.val() ? data.val() : [] ;
this.emitMatch();
}
)
}
updateMatch(poule,numMatch,score1,score2){
firebase.database().ref('poule'+ poule + '/' + numMatch ).update({point1:score1 , point2:score2 })
}
updateJoueur(indexe,point,victoire,defaite,nbdejeu){
firebase.database().ref('joueurs/'+ indexe ).update({point:point , victoire:victoire ,defaite:defaite ,nbdejeu: nbdejeu })
}
}I would like sort a tennis player by Point .here a picture below of my Scream (HTLM + Ts) Sort OK
Below this is CODE Typescript: my Object Tab is joueurClassement so i display in HTLM joueurClassement
const sortByMapped = (map,compareFn) => (a,b) => compareFn(map(a),map(b));
const byValue = (a,b) => a - b;
const toPoint = e => e.point;
const byPoint = sortByMapped(toPoint,byValue);
this.joueurClassement.sort(byPoint)
But sometime the "sort function" is KO . Here a picture of this issue: sort KO ERROR TypeError: this.joueurClassement.sort is not a function
I don't know why sometimes is Ok or KO .May be index Tab is bad ? could you help me please?
回答1:
Sorry I didn't see the screen shot of your firebase collection. Ok, so if you want to keep your joueurs collection as an array, you could check if your object is an array when you get the result from your service and if not, convert it to array like this
let joueurs = data.val();
if (joueurs) {
if (Array.isArray(joueurs) {
// joueurs is an array // no conversion needed
} else {
// Assume that joueurs is an object
let joueursTable = [];
// for each "indexed" property "0", "1", etc... add its value to joueursTable
Object.keys(joueurs)
.filter(key => Number.isInteger(Number(key)))
.forEach(key => joueursTable[key] = joueurs[key]);
console.log(joueursTable) // --> Here should have your object converted to array
}
} else {
// empty result
}
Hope it helps you.
回答2:
Is it possible to share the code of your component to see where your table is build / initialized, because typically this error should mean that you object joueuerClassement is not an Array so it has not sort function.
回答3:
The way Firebase stores arrays is a little weird and I think you should store your players as a collection instead of an array. When you send an array to firebase database, it will store it as an object like this :
// send this array
[{name: 'foo', age: 25}, {name: 'bar', age: 30}]
// Stored like this
{
"0": {name: "foo", age: 25},
"1": {name: "bar", age: 30}
}
So, technically, when you get your data, firebase database will return an object BUT on certain conditions it should be converted to an array. See this article for more details
https://firebase.googleblog.com/2014/04/best-practices-arrays-in-firebase.html
I think it could be better to use a collection for "joueurs" and have a unique id for each joueur of your collection.
来源：https://stackoverflow.com/questions/61293513/issue-about-sort-tab-object-angular-ts-to-display-championship-classificatio