Discussion :

[69Pierre]

Bonjour.

J'essaie de bricoler des méthodes pour trier les lignes mais j'ai de gros problèmes de syntaxe et de type de données.

Le code :

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
 
...
 
export  class  DashboardComponent  implements  OnInit {
  sorties:  Sorties[];
  selectedSorties:  Sorties  = { date :  null , chrono:null, itineraire:  null};
 
  constructor(private apiService: ApiPHpService) { }
 
  ngOnInit() {
    this.apiService.readSorties().subscribe((sorties: Sorties[])=>{
      this.sorties = sorties;
      console.log(this.sorties);
    })
  }
}
...
 
    // resetting other headers
    this.headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });
 
    // sorting countries	sorties:  Sorties[];
    if (direction === '' || column === '') {
      this.sorties = Sorties;
    } else {
      this.sorties = Sorties.sort((a, b) => {
        const res = compare(`${a[column]}`, `${b[column]}`);
        return direction === 'asc' ? res : -res;
      });
    }
  }

Et me renvoie une erreur à la compilation : "Property 'sort' does not exist on type 'typeof Sorties'"

Je comprends que j'essaie d'appliquer une méthode à un objet qui n'a pas le bon type mais pour résoudre le problème, c'est une autre paire de manches.

Merci de votre aide.

[DimKlen]

Salut,
Il me semble que tu dois initialiser la liste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

sorties:  Sorties[] = []

[69Pierre]

Bonjour.

J'avais initialisé la liste : sorties = Sorties;.

Un sorties: Sorties[] = []; me renvoie :

error TS2740: Type 'typeof Sorties' is missing the following properties from type 'Sorties[]': pop, push, concat, join, and 25 more.

[69Pierre]

J'oubiais le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.sorties = [...Sorties].sort((a, b) => {

d'origine renvoie les erreurs :

ERROR in src/app/dashboard/dashboard.component.ts(80,7): error TS2741: Property 'prototype' is missing in type 'any[]' but required in type 'typeof Sorties'.
src/app/dashboard/dashboard.component.ts(80,26): error TS2488: Type 'typeof Sorties' must have a '[Symbol.iterator]()' method that returns an iterator.

[dukoid]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
...
sorties:  Sorties[] = [];
...
this.sorties = sorties.sort((a,b) => a[column].localeCompare(b[column]));
return (direction === 'asc')? this.sorties: this.sorties.reverse();

si ça fonctionne pas, ça donne quoi: this.sorties?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    this.apiService.readSorties().subscribe((sorties: Sorties[])=>{
      this.sorties = sorties;
      console.log(this.sorties);

[69Pierre]

Bonjour.

"this.sorties" renvoie, à l'affichage, une liste issue de ma BDD comme escompté.

Le résultat d'un SELECT en BDD.

[69Pierre]

J'ai compris d'où venait une grosse partie de l'erreur.

J'ai fait yune classe DashboardComponent qui fonctionne bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
export  class  DashboardComponent  implements  OnInit {
  sorties:  Sorties[];
  selectedSorties:  Sorties  = { date :  null , chrono:null, itineraire:  null};
 
  constructor(private apiService: ApiPHpService) { }
 
  ngOnInit() {
    this.apiService.readSorties().subscribe((sorties: Sorties[])=>{
      this.sorties = sorties; 
      console.log(this.sorties); //A commenter
    })
  }
}

Puis une classe NgbdTableSortable qui devrait construire un objet de type apiService (là je ne sais pas faire) :

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
export class NgbdTableSortable {
  //COMMENT CONSTRUIRE sorties ?
  sorties: Sorties;
 
  @ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader>;
 
  onSort({column, direction}: SortEvent) {
 
    // resetting other headers
    this.headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });
 
    // sorting countries	sorties:  Sorties[];
    if (direction === '' || column === '') {
      this.sorties = Sorties;
    } else {
      this.sorties = [...Sorties].sort((a, b) => {
        const res = compare(`${a[column]}`, `${b[column]}`);
        return direction === 'asc' ? res : -res;
      });
    }
  }
 
}

[69Pierre]

Bon.

J'ai tout recommencé.

Je cherche à récupérer une liste issue d'une requête SQL SELECT.

Code api-php.service.ts :

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
import { Injectable } from '@angular/core';
 
import { HttpClient } from '@angular/common/http';
 
import { Sortie } from  './sortie';
import { Observable } from  'rxjs';
 
@Injectable({
  providedIn: 'root'
})
export class ApiPHpService {
  PHP_API_SERVER = "http://127.0.0.1:8000/touslesport/Projet-V5.2";
  constructor(private httpClient: HttpClient) {}
  readSorties(): Observable<Sortie[]>{
    return this.httpClient.get<Sortie[]>(`${this.PHP_API_SERVER}/api/read.php`);
  }
}

Code sortie.ts :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
export  interface  Sortie {	
  date: number;
  chrono:  number;
  itineraire:  string;
}

Code sortie.service.ts :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
import {Sortie} from './sortie';
import {ApiPHpService} from './api-php.service';
 
const SORTIES: Sortie[] =  ApiPHpService.readSorties().subscribe((sorties: Sorties[])=>{
       this.sorties = sorties; 
	   console.log(this.sorties);
	   });

me retourne l'erreur :

ERROR in src/app/services/sorties/sortie.service.ts:13:42 - error TS2339: Property 'readSorties' does not exist on type 'typeof ApiPHpService'.

[krakatoa]

soit la fonction readSorties() n'existe pas, soit la classe n'a pas été instancié.

[dukoid]

Angular propose de déclarer un service au niveau d'un module.
la solution la plus simple est de mettre le service dans providers du module racine: app.module.ts
ainsi ce service sera instancié qu'une seule fois au niveau le plus haut et sera injecté dans tous les composants ou services (via DI: injection dépendance) qui le demande (présent dans le constructeur des composants ou services)

#SortiesService.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
import {Sortie} from './sortie';
import {ApiPHpService} from './api-php.service';
...
...
sorties: Sorties[] = [];
 
constructor(private apiService: ApiPHpService) { }
 
getSorties(): Sorties[] {
    return this.apiService.readSorties();
}

utilisation dans un composant ou un service

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
import {SortiesService} from '???????????????????';
...
constructor(private sortiesService: SortiesService) { }
...
...
   this.sortiesService.getSorties().subscribe((sorties: Sorties[])=>{
       console.log(this.sorties);
   });
...
...

#app.module.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
...
import {ApiPHpService} from '?????????????????????????????????';
...
,
providers: [ApiPHpService],        // l'instance de ApiPHpService sera injecté dans le constructeur des composants ou des services qui le demande
...

[69Pierre]

Merci de votre aide mais malheureusement, je n'ai pas encore le niveau pour comprendre comme évident ce que vous me suggérez.

@krakatoa : readSorties() existe dans api-php.service.ts mais est ce une fonction et comment l'appeler ?

@dukoid : pourquoi mettre mon service à un niveau plus haut résoudrait mon problème ?
A priori, il ne sera appelé qu'ici.

[dukoid]

je l'ai mis dans app.module.ts par simplicité.
j'ai bien vu que tu débutes et donc pour ne pas t'embouiller avec une couche de complexité supplémentaire...
tu pourrais le mettre au niveau d'un module qui contient tes services mais je ne penses pas que tu l'as fait....


je ne connais pas l'ensemble du projet, tu peux aussi le mettre au niveau d'un composant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
import { Stored1Service } from '../service/stored1.service';
 
@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css'],
  providers: [Stored1Service ]                             // l'instance est au niveau de ce seul composant
})
export class FirstComponent implements OnInit {
 
  constructor(private stored1Service: Stored1Service) { }
...

** pour readSorties()

regarde le getSorties() de mon code plus haut


* tous les services doivent être mis dans providers: [..] d'un module ou d'un composant
pour récupérer l'instance dans le constructeur d'un service ou d'un composant !

tu as 2 services donc .......
remarques: SortiesService n'est pas très utile. on pourrai directement interroger apiHpSortiesService

[69Pierre]

Merci.

Excuse moi d'avoir autant de mal à percuter.
Avant de faire plus propre, j'aimerai comprendre.
Peux tu commenter les lignes de codes de sortie.service.ts et des logs qui sont générés, STP ?
Je suis à la rue.

J'ai bien mis la séquence :

Code sortie.service.ts :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
import {Sortie} from './sortie';
import {ApiPHpService} from './api-php.service';
...
...
sorties: Sorties[] = [];
 
constructor(private apiService: ApiPHpService) { }
 
getSorties(): Sorties[] {
    return this.apiService.readSorties();
}

mais j'ai plein d'erreurs :

ERROR in src/app/services/sorties/sortie.service.ts(17,10): error TS2304: Cannot find name 'Sorties'.
src/app/services/sorties/sortie.service.ts(19,1): error TS2304: Cannot find name 'constructor'.
src/app/services/sorties/sortie.service.ts(19,13): error TS2304: Cannot find name 'private'.
src/app/services/sorties/sortie.service.ts(19,21): error TS2304: Cannot find name 'apiService'.
src/app/services/sorties/sortie.service.ts(21,1): error TS2304: Cannot find name 'getSorties'.
src/app/services/sorties/sortie.service.ts(21,15): error TS2304: Cannot find name 'Sorties'.
src/app/services/sorties/sortie.service.ts(22,55): error TS2304: Cannot find name 'Sorties'.
src/app/services/sorties/sortie.service.ts(112,24): error TS2552: Cannot find name 'SORTIES'. Did you mean 'sorties'?

[dukoid]

un service est une classe, t'as oublié des choses non ?

exemple avec un service: Stored1Service

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class Stored1Service {
 
  constructor() { }
 
}

tu peux créer un service via le CLI

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
ng g service Stored1

[69Pierre]

En fait dans mon post de 19h00, j'ai oublié de préciser que la "méthode" suivante fonctionne :

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
import { Component, OnInit, Directive, EventEmitter, Input, Output, QueryList, ViewChildren } from '@angular/core';
 
import { ApiPHpService } from '../services/sorties/api-php.service';
import { Sorties } from '../services/sorties/sorties';
 
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export  class  DashboardComponent  implements  OnInit {
  sorties:  Sorties[];
  selectedSorties:  Sorties  = { date :  null , chrono:null, itineraire:  null};
 
  constructor(private apiService: ApiPHpService) { }
 
  ngOnInit() {
    this.apiService.readSorties().subscribe((sorties: Sorties[])=>{
      this.sorties = sorties; 
      console.log(this.sorties); //A commenter
    })
  }
}

et me permet de récupérer des :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
			  <td>{{ sorties.date }}</td>
			  <td>{{ sorties.itineraire }}</td>
			  <td>{{ sorties.chrono }}</td>

dans le .html du même composant.

C'est juste que je n'arrive pas transformer la liste précédente (format json ?) au format suivant :

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
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
import {Country} from './country';
 
export const COUNTRIES: Country[] = [
  {
    id: 1,
    name: 'Russia',
    flag: 'f/f3/Flag_of_Russia.svg',
    area: 17075200,
    population: 146989754
  },
  {
    id: 2,
    name: 'France',
    flag: 'c/c3/Flag_of_France.svg',
    area: 640679,
    population: 64979548
  },
  {
    id: 3,
    name: 'Germany',
    flag: 'b/ba/Flag_of_Germany.svg',
    area: 357114,
    population: 82114224
  },
  {
    id: 4,
    name: 'Portugal',
    flag: '5/5c/Flag_of_Portugal.svg',
    area: 92090,
    population: 10329506
  },
  {
    id: 5,
    name: 'Canada',
    flag: 'c/cf/Flag_of_Canada.svg',
    area: 9976140,
    population: 36624199
  },
  {
    id: 6,
    name: 'Vietnam',
    flag: '2/21/Flag_of_Vietnam.svg',
    area: 331212,
    population: 95540800
  },
  {
    id: 7,
    name: 'Brazil',
    flag: '0/05/Flag_of_Brazil.svg',
    area: 8515767,
    population: 209288278
  },
  {
    id: 8,
    name: 'Mexico',
    flag: 'f/fc/Flag_of_Mexico.svg',
    area: 1964375,
    population: 129163276
  },
  {
    id: 9,
    name: 'United States',
    flag: 'a/a4/Flag_of_the_United_States.svg',
    area: 9629091,
    population: 324459463
  },
  {
    id: 10,
    name: 'India',
    flag: '4/41/Flag_of_India.svg',
    area: 3287263,
    population: 1324171354
  },
  {
    id: 11,
    name: 'Indonesia',
    flag: '9/9f/Flag_of_Indonesia.svg',
    area: 1910931,
    population: 263991379
  },
  {
    id: 12,
    name: 'Tuvalu',
    flag: '3/38/Flag_of_Tuvalu.svg',
    area: 26,
    population: 11097
  },
  {
    id: 13,
    name: 'China',
    flag: 'f/fa/Flag_of_the_People%27s_Republic_of_China.svg',
    area: 9596960,
    population: 1409517397
  }
];

pour pouvoir le récupérer sous la même forme que si je faisais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

import {COUNTRIES} from './countries';

dans le script précédent.

[69Pierre]

un service est une classe, t'as oublié des choses non ?

oui, clairement.
Je réessaie avec la classe.

[69Pierre]

Je n'y arriverai jamais...

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
@Injectable({
  providedIn: 'root'
})	   
export class LesSortiesService {
//sorties:  Sorties[];
 sorties:  Sortie[];
constructor(private apiService: ApiPHpService) { }
 
getSorties(): Sortie[] {
    this.apiService.readSorties().subscribe((sorties: Sortie[])=>{
       console.log(this.sorties);
       return sorties;
    });
}
}

me renvoie

error TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.

Et aprés comment récupérer le résultat de getSorties dans une variable SORTIES ?

[dukoid]

une astuce pour simplifier l'ensemble, utiliser des "any"

#SortiesService.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
import {Sortie} from './sortie';
import {ApiPHpService} from './api-php.service';
...
...
sorties: any;
 
constructor(private apiService: ApiPHpService) { }
 
getSorties() {
    return this.apiService.readSorties();
}

utilisation dans un composant ou un service

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
import {SortiesService} from '???????????????????';
...
constructor(private sortiesService: SortiesService) { }
...
...
   this.sortiesService.getSorties().subscribe((sorties: any)=>{
       console.log(this.sorties);
   });
...
...

#app.module.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
...
import {ApiPHpService} from '?????????????????????????????????';
...
,
providers: [ApiPHpService],        // l'instance de ApiPHpService sera injecté dans le constructeur des composants ou des services qui le demande
...

[69Pierre]

Ah merci, du coup je comprends mieux.

Par contre, je reste incapable de mettre ce résultat dans une variable SORTIES dans le même fichier.

[dukoid]

ou veux tu recuperer les données, dans un composant ? dans un service ?


on souscrit à un observable uniquement là ou on a besoin des données.

ici, un composant ? un service ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
....
sorties: any;

   this.sortiesService.getSorties().subscribe((sorties: any)=>{
       console.log(this.sorties);

        this.sorties = sorties;
   });