Property 'sort' does not exist on type 'typeof Sorties'

**69Pierre** · 10/05/2020, 22h18

Dans une variable SORTIES dans le même fichier qui sera utilisée comme suit :

Code :

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

1
2
3
4
5
  private _search(): Observable<SearchResult> {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    // 1. sort
    let sorties = sort(SORTIES, sortColumn, sortDirection);

**krakatoa** · 10/05/2020, 22h33

ta fonction _search il manque la fin

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
  private async _search(): Observable<SearchResult> {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    let SORTIES = await this.sortiesService.getSorties().subscribe((sorties: any)=>{
        return sorties;
   });
 
       console.log(SORTIES );
 
    // 1. sort
    let sorties = sort(SORTIES, sortColumn, sortDirection);

**69Pierre** · 10/05/2020, 22h37

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  private _search(): Observable<SearchResult> {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    // 1. sort
    let sorties = sort(SORTIES, sortColumn, sortDirection);
 
    // 2. filter
    sorties = sorties.filter(sortie => matches(sortie, searchTerm, this.pipe));
    const total = sorties.length;
 
    // 3. paginate
    sorties = sorties.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({sorties, total});
  }

**krakatoa** · 10/05/2020, 22h40

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
  private async _search(): Observable<SearchResult> {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    let SORTIES = await this.sortiesService.getSorties().subscribe((sorties: any)=>{
        return sorties;
   });
 
       console.log(SORTIES );
 
    // 1. sort
    let sorties = sort(SORTIES, sortColumn, sortDirection);

**69Pierre** · 10/05/2020, 22h58

Non, merci à tous les 2, je n'y arriverai pas.

Y a t-il des tuto pour la syntaxe du .ts, TypeScript simple et en français ?

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
@Injectable({
  providedIn: 'root'
})	   
export class LesSortiesService {
 
constructor(private apiService: ApiPHpService) { }
 
  getSorties() {
    return this.apiService.readSorties();
  }
}
 
...
 
 
 
 
  private async _search(): Observable<SearchResult> {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    let SORTIES = await this.LesSortiesService.getSorties().subscribe((sorties: any)=>{
        return sorties;
   });
 
       console.log(SORTIES );
 
  // private _search(): Observable<SearchResult> {
    // const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    // 1. sort
    let sorties = sort(SORTIES, sortColumn, sortDirection);
 
    // 2. filter
    sorties = sorties.filter(sortie => matches(sortie, searchTerm, this.pipe));
    const total = sorties.length;
 
    // 3. paginate
    sorties = sorties.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({sorties, total});
  }

ERROR in src/app/services/sorties/sortie.service.ts(122,28): error TS1064: The return type of an async function or method must be the global Promise<T> type.
src/app/services/sorties/sortie.service.ts(125,30): error TS2339: Property 'sortiesService' does not exist on type 'SortieService'.

**dukoid** · 11/05/2020, 00h38

désolé, j'ai oublié un truc avec le async/await... comme je ne teste pas le code.

voici la modification :

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
 
@Injectable({
  providedIn: 'root'
})	   
export class LesSortiesService {
 
constructor(private apiService: ApiPHpService) { }
 
  getSorties() {
    return this.apiService.readSorties();
  }
}
 
...
 
 
  private async _search(): Observable<SearchResult> {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    const data = await this.LesSortiesService.getSorties().toPromise().then((sorties: any)=>{
        return sorties;
   });
 
   console.log(data);
 
  // private _search(): Observable<SearchResult> {
    // const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    // 1. sort
    let sorties = sort(data, sortColumn, sortDirection);
 
    // 2. filter
    sorties = sorties.filter(sortie => matches(sortie, searchTerm, this.pipe));
    const total = sorties.length;
 
    // 3. paginate
    sorties = sorties.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({sorties, total});
  }

dit moi si: console.log(data);
te retourne des données ou pas ?

**69Pierre** · 11/05/2020, 07h57

Bonjour.

Encore merci pour ton aide.

ERROR in src/app/services/sorties/sortie.service.ts(113,28): error TS1064: The return type of an async function or method must be the global Promise<T> type.
src/app/services/sorties/sortie.service.ts(116,29): error TS2339: Property 'LesSortiesService' does not exist on type 'SortieService'.

Non, console.log(data); ne renvoie rien ni dans le navigateur ni en ligne de commande.

**dukoid** · 11/05/2020, 08h27

(1) pour: The return type of an async function or method must be the global Promise<T> type

enlève l'observable sur la fonction, comme ceci:

Code :

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

1
2
3
 
private async _search() {
 ...

(2)
pour: src/app/services/sorties/sortie.service.ts(116,29): error TS2339: Property 'LesSortiesService' does not exist on type 'SortieService'.

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
@Injectable({
  providedIn: 'root'
})	   
export class LesSortiesService {
 
constructor(private apiService: ApiPHpService, ??????????????????????????????????????) { }
 
  getSorties() {
    return this.apiService.readSorties();
  }
}
 
...
 
 
  private async _search() {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    const data = await this.?????????????????????????????.getSorties().toPromise().then((sorties: any)=>{
        return sorties;
   });
 
   console.log(data);
 
  // private _search(): Observable<SearchResult> {
    // const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    // 1. sort
    let sorties = sort(data, sortColumn, sortDirection);
 
    // 2. filter
    sorties = sorties.filter(sortie => matches(sortie, searchTerm, this.pipe));
    const total = sorties.length;
 
    // 3. paginate
    sorties = sorties.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({sorties, total});
  }

**69Pierre** · 11/05/2020, 10h23

OK.

Que dois mettre à la place des ???????????????????????????????????????????? ?

**69Pierre** · 12/05/2020, 20h07

Bonjour.

Je ne comprends pas le 3eme argument dans la signature du constructor (les ?)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
@Injectable({
  providedIn: 'root'
})	   
export class LesSortiesService {
 
constructor(private apiService: ApiPHpService, ??????????????????????????????????????) { }
 
  getSorties() {
    return this.apiService.readSorties();
  }
}

Dans cette deuxième partie, je pensais mettre le nom de la classe : LesSortiesService à la place des ?

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
private async _search() {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    const data = await this.?????????????????????????????.getSorties().toPromise().then((sorties: any)=>{
        return sorties;
   });
 
   console.log(data);
 
  // private _search(): Observable<SearchResult> {
    // const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    // 1. sort
    let sorties = sort(data, sortColumn, sortDirection);
 
    // 2. filter
    sorties = sorties.filter(sortie => matches(sortie, searchTerm, this.pipe));
    const total = sorties.length;
 
    // 3. paginate
    sorties = sorties.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({sorties, total});
  }

**dukoid** · 12/05/2020, 20h54

Code :

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

1
2
 
 const data = await this.?????????????????????????????.getSorties().toPromise().then((sorties: any)=>{

.getSorties(). se trouve ou ???????

**69Pierre** · 12/05/2020, 20h56

Bonsoir.

.getSorties(). se trouve dans le même fichier, dans la classe LesSortiesService

**krakatoa** · 12/05/2020, 21h39

Code :

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

1
2
3
 
 
 const data = await this.getSorties().toPromise().then((sorties: any)=>{

**69Pierre** · 12/05/2020, 23h31

ERROR in src/app/services/sorties/sortie.service.ts(86,33): error TS2339: Property 'sorties' does not exist on type 'Observable<{ sorties: Sortie[]; total: number; }>'.
src/app/services/sorties/sortie.service.ts(87,32): error TS2339: Property 'total' does not exist on type 'Observable<{ sorties: Sortie[]; total: number; }>'.
src/app/services/sorties/sortie.service.ts(114,29): error TS2551: Property 'getSorties' does not exist on type 'SortieService'. Did you mean 'sorties$'?

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import {Injectable, PipeTransform} from '@angular/core';
 
import {BehaviorSubject, Observable, of, Subject} from 'rxjs';
 
import {Sortie} from './sortie';
//import {SORTIES} from './countries'; récuperer les données
import {DecimalPipe} from '@angular/common';
import {debounceTime, delay, switchMap, tap} from 'rxjs/operators';
import {SortColumn, SortDirection} from '../../directives/sortie.sortable.directive';
import {ApiPHpService} from './api-php.service';
 
// const SORTIES: Sortie[] =  ApiPHpService.readSorties().subscribe((sorties: Sorties[])=>{
       // this.sorties = sorties; 
	   // console.log(this.sorties);
	   // });
// @Injectable({
  // providedIn: 'root'
// })	   
export class LesSortiesService {
 
constructor(private apiService: ApiPHpService) { }
 
  getSorties() {
    return this.apiService.readSorties();
  }
}
 
 
 
 
interface SearchResult {
  sorties: Sortie[];
  total: number;
}
 
interface State {
  page: number;
  pageSize: number;
  searchTerm: string;
  sortColumn: SortColumn;
  sortDirection: SortDirection;
}
 
const compare = (v1: string, v2: string) => v1 < v2 ? -1 : v1 > v2 ? 1 : 0;
 
function sort(sorties: Sortie[], column: SortColumn, direction: string): Sortie[] {
  if (direction === '' || column === '') {
    return sorties;
  } else {
    return [...sorties].sort((a, b) => {
      const res = compare(`${a[column]}`, `${b[column]}`);
      return direction === 'asc' ? res : -res;
    });
  }
}
 
function matches(sortie: Sortie, term: string, pipe: PipeTransform) {
  return sortie.itineraire.toLowerCase().includes(term.toLowerCase())
    || pipe.transform(sortie.chrono).includes(term)
    || pipe.transform(sortie.date).includes(term);
}
 
@Injectable({providedIn: 'root'})
export class SortieService {
  private _loading$ = new BehaviorSubject<boolean>(true);
  private _search$ = new Subject<void>();
  private _sorties$ = new BehaviorSubject<Sortie[]>([]);
  private _total$ = new BehaviorSubject<number>(0);
 
  private _state: State = {
    page: 1,
    pageSize: 4,
    searchTerm: '',
    sortColumn: '',
    sortDirection: ''
  };
 
  constructor(private pipe: DecimalPipe) {
    this._search$.pipe(
      tap(() => this._loading$.next(true)),
      debounceTime(200),
      switchMap(() => this._search()),
      delay(200),
      tap(() => this._loading$.next(false))
    ).subscribe(result => {
      this.sorties$.next(result.sorties);
      this._total$.next(result.total);
    });
 
    this._search$.next();
  }
 
  get sorties$() { return this.sorties$.asObservable(); }
  get total$() { return this._total$.asObservable(); }
  get loading$() { return this._loading$.asObservable(); }
  get page() { return this._state.page; }
  get pageSize() { return this._state.pageSize; }
  get searchTerm() { return this._state.searchTerm; }
 
  set page(page: number) { this._set({page}); }
  set pageSize(pageSize: number) { this._set({pageSize}); }
  set searchTerm(searchTerm: string) { this._set({searchTerm}); }
  set sortColumn(sortColumn: SortColumn) { this._set({sortColumn}); }
  set sortDirection(sortDirection: SortDirection) { this._set({sortDirection}); }
 
  private _set(patch: Partial<State>) {
    Object.assign(this._state, patch);
    this._search$.next();
  }
 
  private async _search(){//: Observable<SearchResult> {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    const data = await this.getSorties().toPromise().then((sorties: any)=>{
        return sorties;
   });
 
   console.log(data);
 
  // private _search(): Observable<SearchResult> { 
    // const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    // 1. sort
    let sorties = sort(data, sortColumn, sortDirection);
 
    // 2. filter
    sorties = sorties.filter(sortie => matches(sortie, searchTerm, this.pipe));
    const total = sorties.length;
 
    // 3. paginate
    sorties = sorties.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({sorties, total});
  }
}

**dukoid** · 13/05/2020, 01h14

tout à l'heure tu m'as dit que getSorties était dans la meme classe mais en fait non

Code :

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

1
2
3
4
5
6
7
8
9
 
export class LesSortiesService {
 
constructor(private apiService: ApiPHpService) { }
 
  getSorties() {
    return this.apiService.readSorties();
  }
}

tu vois bien que getSorties est dans la classe LesSortiesService
donc les ??????????? doit etre LesSortiesService

Code :

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

constructor(private lesSortiesService: LesSortiesService, .........

utlisation

Code :

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

1
2
 
this.lesSortiesService.getSorties(...................

j'ai vu un problème à la ligne 86

Code :

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

1
2
3
4
5
 
pas bon -->    ).subscribe(result => {
 
 
bon  -->    ).subscribe((result: any) => {

je t'avais parlé dans ce message de material design
https://www.developpez.net/forums/d2...tri-d-tableau/

il intègre une pagination, c'est beaucoup plus simple que ce que tu utilises
en plus avec un exemple de code sur stakcblitz

**69Pierre** · 13/05/2020, 22h14

Bonsoir.

Je me suis noyé, je ne sais plus ce que je fais.
Le

Code :

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

	constructor(private lesSortiesService: LesSortiesService,...){};

je ne sais pas où l'utiliser ni comment finir de l'écrire.

dans 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
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import {Injectable, PipeTransform} from '@angular/core';
 
import {BehaviorSubject, Observable, of, Subject} from 'rxjs';
 
import {Sortie} from './sortie';
//import {SORTIES} from './countries'; récuperer les données
import {DecimalPipe} from '@angular/common';
import {debounceTime, delay, switchMap, tap} from 'rxjs/operators';
import {SortColumn, SortDirection} from '../../directives/sortie.sortable.directive';
import {ApiPHpService} from './api-php.service';
 
// const SORTIES: Sortie[] =  ApiPHpService.readSorties().subscribe((sorties: Sorties[])=>{
       // this.sorties = sorties; 
	   // console.log(this.sorties);
	   // });
// @Injectable({
  // providedIn: 'root'
// })	   
export class LesSortiesService {
 
constructor(private apiService: ApiPHpService) { }
 
  getSorties() {
    return this.apiService.readSorties();
  }
}
 
 
 
 
interface SearchResult {
  sorties: Sortie[];
  total: number;
}
 
interface State {
  page: number;
  pageSize: number;
  searchTerm: string;
  sortColumn: SortColumn;
  sortDirection: SortDirection;
}
 
const compare = (v1: string, v2: string) => v1 < v2 ? -1 : v1 > v2 ? 1 : 0;
 
function sort(sorties: Sortie[], column: SortColumn, direction: string): Sortie[] {
  if (direction === '' || column === '') {
    return sorties;
  } else {
    return [...sorties].sort((a, b) => {
      const res = compare(`${a[column]}`, `${b[column]}`);
      return direction === 'asc' ? res : -res;
    });
  }
}
 
function matches(sortie: Sortie, term: string, pipe: PipeTransform) {
  return sortie.itineraire.toLowerCase().includes(term.toLowerCase())
    || pipe.transform(sortie.chrono).includes(term)
    || pipe.transform(sortie.date).includes(term);
}
 
@Injectable({providedIn: 'root'})
export class SortieService {
  private _loading$ = new BehaviorSubject<boolean>(true);
  private _search$ = new Subject<void>();
  private _sorties$ = new BehaviorSubject<Sortie[]>([]);
  private _total$ = new BehaviorSubject<number>(0);
 
  private _state: State = {
    page: 1,
    pageSize: 4,
    searchTerm: '',
    sortColumn: '',
    sortDirection: ''
  };
 
  constructor(private pipe: DecimalPipe) {
    this._search$.pipe(
      tap(() => this._loading$.next(true)),
      debounceTime(200),
      switchMap(() => this._search()),
      delay(200),
      tap(() => this._loading$.next(false))
    ).subscribe(result: any => {
      this.sorties$.next(result.sorties);
      this._total$.next(result.total);
    });
 
    this._search$.next();
  }
 
  get sorties$() { return this.sorties$.asObservable(); }
  get total$() { return this._total$.asObservable(); }
  get loading$() { return this._loading$.asObservable(); }
  get page() { return this._state.page; }
  get pageSize() { return this._state.pageSize; }
  get searchTerm() { return this._state.searchTerm; }
 
  set page(page: number) { this._set({page}); }
  set pageSize(pageSize: number) { this._set({pageSize}); }
  set searchTerm(searchTerm: string) { this._set({searchTerm}); }
  set sortColumn(sortColumn: SortColumn) { this._set({sortColumn}); }
  set sortDirection(sortDirection: SortDirection) { this._set({sortDirection}); }
 
  private _set(patch: Partial<State>) {
    Object.assign(this._state, patch);
    this._search$.next();
  }
 
  private async _search(){//: Observable<SearchResult> {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
	const data = await this.lesSortiesService.getSorties().toPromise().then((sorties: any)=>{
        return sorties;
   });
 
   console.log(data);
 
  // private _search(): Observable<SearchResult> { 
    // const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    // 1. sort
    let sorties = sort(data, sortColumn, sortDirection);
 
    // 2. filter
    sorties = sorties.filter(sortie => matches(sortie, searchTerm, this.pipe));
    const total = sorties.length;
 
    // 3. paginate
    sorties = sorties.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({sorties, total});
  }
}

Et sur ce passage :

Code :

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

1
2
3
    ).subscribe(result: any => {
      this.sorties$.next(result.sorties);
      this._total$.next(result.total);

le compilateur ne trouve pas result.

J'essaiera la méthode que tu m'as indiquée sur l'autre post dès que je peux mais là j'aurai aimé comprendre comment récupérer ce satané jeu de données.

**krakatoa** · 13/05/2020, 23h17

Code :

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

1
2
3
pas bon -->    ).subscribe(result => { 
bon  -->    ).subscribe((result: any) => {

est ce que comme ça tu les vois les parenthèses ?

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


@Injectable({providedIn: 'root'})
export class SortieService {
  private _loading$ = new BehaviorSubject<boolean>(true);
  private _search$ = new Subject<void>();
  private _sorties$ = new BehaviorSubject<Sortie[]>([]);
  private _total$ = new BehaviorSubject<number>(0);
 
  private _state: State = {
    page: 1,
    pageSize: 4,
    searchTerm: '',
    sortColumn: '',
    sortDirection: ''
  };
 
  constructor(private pipe: DecimalPipe, private lesSortiesService: LesSortiesService) {
    this._search$.pipe(

**69Pierre** · 14/05/2020, 22h52

OK, merci pour les parenthèses, là je les vois bien.
Plus d'erreur de compil mais rien dans le navigateur et cette erreur dans la console :

Error: Template parse errors:
Can't bind to 'result' since it isn't a known property of 'ngb-highlight'.
1. If 'ngb-highlight' is an Angular component and it has 'result' input, then verify that it is part of this module.
2. If 'ngb-highlight' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ntry of countries$ | async">

<th scope="row">{{ country.date }}</th>
<td><ngb-highlight [ERROR ->][result]="country.itineraire | number" [term]="service.searchTerm"></ngb-highlight></td>
<td><n"): ng:///AppModule/NgbdTableComplete.html@19:25

Can't bind to 'term' since it isn't a known property of 'ngb-highlight'.
1. If 'ngb-highlight' is an Angular component and it has 'term' input, then verify that it is part of this module.
2. If 'ngb-highlight' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("scope="row">{{ country.date }}</th>

<td><ngb-highlight [result]="country.itineraire | number" [ERROR ->][term]="service.searchTerm"></ngb-highlight></td>
<td><ngb-highlight [result]="country.chrono |"): ng:///AppModule/NgbdTableComplete.html@19:64

'ngb-highlight' is not a known element:
1. If 'ngb-highlight' is an Angular component, then verify that it is part of this module.
2. If 'ngb-highlight' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("*ngFor="let country of countries$ | async">

<th scope="row">{{ country.date }}</th>
<td>[ERROR ->]<ngb-highlight [result]="country.itineraire | number" [term]="service.searchTerm"></ngb-highlight></t"): ng:///AppModule/NgbdTableComplete.html@19:10

Can't bind to 'result' since it isn't a known property of 'ngb-highlight'.
1. If 'ngb-highlight' is an Angular component and it has 'result' input, then verify that it is part of this module.
2. If 'ngb-highlight' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("try.itineraire | number" [term]="service.searchTerm"></ngb-highlight></td>

<td><ngb-highlight [ERROR ->][result]="country.chrono | number" [term]="service.searchTerm"></ngb-highlight></td>
</tr>
</"): ng:///AppModule/NgbdTableComplete.html@20:25

Can't bind to 'term' since it isn't a known property of 'ngb-highlight'.
1. If 'ngb-highlight' is an Angular component and it has 'term' input, then verify that it is part of this module.
2. If 'ngb-highlight' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("rvice.searchTerm"></ngb-highlight></td>

<td><ngb-highlight [result]="country.chrono | number" [ERROR ->][term]="service.searchTerm"></ngb-highlight></td>
</tr>
</tbody>

"): ng:///AppModule/NgbdTableComplete.html@20:60
'ngb-highlight' is not a known element:
1. If 'ngb-highlight' is an Angular component, then verify that it is part of this module.
2. If 'ngb-highlight' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [result]="country.itineraire | number" [term]="service.searchTerm"></ngb-highlight></td>

<td>[ERROR ->]<ngb-highlight [result]="country.chrono | number" [term]="service.searchTerm"></ngb-highlight></td>

"): ng:///AppModule/NgbdTableComplete.html@20:10
Can't bind to 'collectionSize' since it isn't a known property of 'ngb-pagination'.
1. If 'ngb-pagination' is an Angular component and it has 'collectionSize' input, then verify that it is part of this module.
2. If 'ngb-pagination' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<div class="d-flex justify-content-between p-2">
<ngb-pagination
[ERROR ->][collectionSize]="(total$ | async)!" [(page)]="service.page" [pageSize]="service.pageSize">
</ngb"): ng:///AppModule/NgbdTableComplete.html@27:6

Can't bind to 'page' since it isn't a known property of 'ngb-pagination'.
1. If 'ngb-pagination' is an Angular component and it has 'page' input, then verify that it is part of this module.
2. If 'ngb-pagination' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("d-flex justify-content-between p-2">

<ngb-pagination
[collectionSize]="(total$ | async)!" [ERROR ->][(page)]="service.page" [pageSize]="service.pageSize">
</ngb-pagination>

"): ng:///AppModule/NgbdTableComplete.html@27:43
Can't bind to 'pageSize' since it isn't a known property of 'ngb-pagination'.
1. If 'ngb-pagination' is an Angular component and it has 'pageSize' input, then verify that it is part of this module.
2. If 'ngb-pagination' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("etween p-2">

<ngb-pagination
[collectionSize]="(total$ | async)!" [(page)]="service.page" [ERROR ->][pageSize]="service.pageSize">
</ngb-pagination>

"): ng:///AppModule/NgbdTableComplete.html@27:67
'ngb-pagination' is not a known element:
1. If 'ngb-pagination' is an Angular component, then verify that it is part of this module.
2. If 'ngb-pagination' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

<div class="d-flex justify-content-between p-2">
[ERROR ->]<ngb-pagination
[collectionSize]="(total$ | async)!" [(page)]="service.page" [pageSize]="servic"): ng:///AppModule/NgbdTableComplete.html@26:4

Je pense que je n'ai pas les bibliothèques pour ngb-highlight et ngb-pagination.
Je ne sais plus si c'est du Boostrap et si je dois récupérer ce module ou pas.

**dukoid** · 14/05/2020, 22h57

essaye avec ça, mais je doute.

#app.module.ts

Code :

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

1
2
3
4
5
6
7
8
9
 
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...
...
@NgModule({
...
  ,
  schemas: [CUSTOM_ELEMENTS_SCHEMA   ]
...

en effet oui, il te manque des packages sur bootstrap. je ne sais pas lesquels.

que donne le: console.log(result);

Code :

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

1
2
3
4
5
 
...
   ).subscribe((result: any) => {
           console.log(result);
...

**69Pierre** · 15/05/2020, 15h01

Bonjour.

Pour app.module.ts, effectivement, ça ne change rien.

Si non avec le code ci-dessous pas de résulat, page vide même pas ce qui est écrit en dur dans le html (qui n'a jamais été présent) :

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import {Injectable, PipeTransform} from '@angular/core';
 
import {BehaviorSubject, Observable, of, Subject} from 'rxjs';
 
import {Sortie} from './sortie';
//import {SORTIES} from './countries'; récuperer les données
import {DecimalPipe} from '@angular/common';
import {debounceTime, delay, switchMap, tap} from 'rxjs/operators';
import {SortColumn, SortDirection} from '../../directives/sortie.sortable.directive';
import {ApiPHpService} from './api-php.service';
 
// const SORTIES: Sortie[] =  ApiPHpService.readSorties().subscribe((sorties: Sorties[])=>{
       // this.sorties = sorties; 
	   // console.log(this.sorties);
	   // });
// @Injectable({
  // providedIn: 'root'
// })	   
export class LesSortiesService {
 
constructor(private apiService: ApiPHpService) { }
 
  getSorties() {
    return this.apiService.readSorties();
  }
}
 
 
 
 
interface SearchResult {
  sorties: Sortie[];
  total: number;
}
 
interface State {
  page: number;
  pageSize: number;
  searchTerm: string;
  sortColumn: SortColumn;
  sortDirection: SortDirection;
}
 
const compare = (v1: string, v2: string) => v1 < v2 ? -1 : v1 > v2 ? 1 : 0;
 
function sort(sorties: Sortie[], column: SortColumn, direction: string): Sortie[] {
  if (direction === '' || column === '') {
    return sorties;
  } else {
    return [...sorties].sort((a, b) => {
      const res = compare(`${a[column]}`, `${b[column]}`);
      return direction === 'asc' ? res : -res;
    });
  }
}
 
function matches(sortie: Sortie, term: string, pipe: PipeTransform) {
  return sortie.itineraire.toLowerCase().includes(term.toLowerCase())
    || pipe.transform(sortie.chrono).includes(term)
    || pipe.transform(sortie.date).includes(term);
}
 
@Injectable({providedIn: 'root'})
export class SortieService {
  private _loading$ = new BehaviorSubject<boolean>(true);
  private _search$ = new Subject<void>();
  private _sorties$ = new BehaviorSubject<Sortie[]>([]);
  private _total$ = new BehaviorSubject<number>(0);
 
  private _state: State = {
    page: 1,
    pageSize: 4,
    searchTerm: '',
    sortColumn: '',
    sortDirection: ''
  };
 
constructor(private pipe: DecimalPipe, private lesSortiesService: LesSortiesService) {
    this._search$.pipe(
      tap(() => this._loading$.next(true)),
      debounceTime(200),
      switchMap(() => this._search()),
      delay(200),
      tap(() => this._loading$.next(false))
    ).subscribe((result: any) => {
      this.sorties$.next(result.sorties);
      this._total$.next(result.total);
	  console.log(result);
    });
 
    this._search$.next();
  }
 
  get sorties$() { return this.sorties$.asObservable(); }
  get total$() { return this._total$.asObservable(); }
  get loading$() { return this._loading$.asObservable(); }
  get page() { return this._state.page; }
  get pageSize() { return this._state.pageSize; }
  get searchTerm() { return this._state.searchTerm; }
 
  set page(page: number) { this._set({page}); }
  set pageSize(pageSize: number) { this._set({pageSize}); }
  set searchTerm(searchTerm: string) { this._set({searchTerm}); }
  set sortColumn(sortColumn: SortColumn) { this._set({sortColumn}); }
  set sortDirection(sortDirection: SortDirection) { this._set({sortDirection}); }
 
  private _set(patch: Partial<State>) {
    Object.assign(this._state, patch);
    this._search$.next();
  }
 
  private async _search(){//: Observable<SearchResult> {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
	const data = await this.lesSortiesService.getSorties().toPromise().then((sorties: any)=>{
        return sorties;
   });
 
   console.log(data);
 
  // private _search(): Observable<SearchResult> { 
    // const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
 
    // 1. sort
    let sorties = sort(data, sortColumn, sortDirection);
 
    // 2. filter
    sorties = sorties.filter(sortie => matches(sortie, searchTerm, this.pipe));
    const total = sorties.length;
 
    // 3. paginate
    sorties = sorties.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({sorties, total});
  }
}

Property 'sort' does not exist on type 'typeof Sorties'

Angular

Discussions similaires

Partager

Partager