Discussion :

[dukoid]

tu peux tester avec ça:

Code HTML :

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
<div class="wrapper">
  <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>
 
    <ng-container matColumnDef="service">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> service </th>
      <td mat-cell *matCellDef="let element"> {{element.service}} </td>
    </ng-container>
 
    <ng-container matColumnDef="tag">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> tag </th>
      <td mat-cell *matCellDef="let element"> {{element.tag}} </td>
    </ng-container>
 
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
 
  <!-- Angular 8 pagination -->
  <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
</div>

[dukoid]

pour ta question, faire un truc du genre:

Code HTML :

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

1
2
3
...
<table mat-table [dataSource]="dataService.getAllServices(namespace) | async" matSort class="mat-elevation-z8">
...

ça fonctionnerai, le problème est qu'il faut re initialiser la pagination à chaque modification de namespace

Code :

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

1
2
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

faudrait faire un observable qui fait ces actions:
- recuperer les données en souscrivant et met à jour datasource
- re initialise pagination
return un observable

[Whisper40]

tu peux tester avec ça: -> Problème identique
Je vais suivre ton conseil de garder le subscribe

[dukoid]

sinon faut gérer ça dans: MatTableDataSource
https://www.it-swarm.dev/fr/angular/...ble/834010886/

mais bon, je suis partisan au plus simple...



par curiosité, tu obtiens quoi :

Code :

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

1
2
 
{{dataService.getAllServices('services') | async | json }}

[Whisper40]

Je préfère aussi le code simple
Mais je vois toujours pas le problème qu'il à avec [dataSource]="dataSource" alors que dataSource on l'initialise avec :

Code angular :

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

1
2
 
dataSource = new MatTableDataSource<any>();

Et on le remplit bien après.. ça bloque dès la compilation..


Tu voulais ceci comme test ?? :

Code angular :

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

1
2
3
4
5
6
 
 
 <ng-container >
        {{dataService.getAllServices('service') | async | json}}
        <hr>
      </ng-container>

-> TS2341: Property 'dataService' is private and only accessible within class 'ServicesNamespaceComponent'

[dukoid]

je n'ai pas d'erreur avec:
dataSource = new MatTableDataSource<any>();


c'est quoi l'erreur ?


tu peux quand meme le remplir après ?

[Whisper40]

Je n'ai pas d'erreur non plus avec :

Code angular :

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

1
2
 
dataSource = new MatTableDataSource<any>();

Mais l'erreur est signalée ici :

Code html :

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

1
2
 
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

Pour rappel : voila le code actuel
Html

Code angular :

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
 
 
 <!--  <mat-progress-spinner *ngIf="isLoading"
    color="primary" 
    mode="indeterminate">
  </mat-progress-spinner> 
-->
 <!-- WORKING -->
<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Namespace" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" > 
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)='getServices($event.option.value)'>
<mat-progress-bar mode="buffer"></mat-progress-bar>
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.namespace">
        {{option.namespace}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>
 
 
<div class="wrapper">
  <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>
 
    <ng-container matColumnDef="service">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> service </th>
      <td mat-cell *matCellDef="let element"> {{element.service}} </td>
    </ng-container>
 
    <ng-container matColumnDef="tag">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> tag </th>
      <td mat-cell *matCellDef="let element"> {{element.tag}} </td>
    </ng-container>
 
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
 
  <!-- Angular 8 pagination -->
  <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
</div>

Et l'angular :

Code angular :

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
 
import { Component, OnInit, Injectable, ViewChild } from '@angular/core';
import { RestApiService } from '../shared/rest-api.service';
import { FormControl } from '@angular/forms';
import { Observable, of, Subscription } from 'rxjs';
import { tap, startWith, debounceTime, switchMap, map, filter, distinctUntilChanged } from 'rxjs/operators';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
 
@Injectable({
  providedIn: 'root'
})
 
@Component({
  selector: 'app-services-namespace',
  templateUrl: './services-namespace.component.html',
  styleUrls: ['./services-namespace.component.scss']
})
 
export class ServicesNamespaceComponent implements OnInit {
 
  myControl = new FormControl();
  myControl2 = new FormControl();
  options = [];
  filteredOptions: Observable<any[]>;
  namespaces = [];
  services: Observable<any[]>;
 
  displayedColumns: string[] = ['id', 'service'];
  dataSource = new MatTableDataSource<any>();
 
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
 
 
  constructor(private dataService: RestApiService) {
     this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      debounceTime(500),
      distinctUntilChanged(),
      switchMap(val => {
            return this.filter(val || '')
       }) 
    )
   }
 
   ngOnInit() { 
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;    
  }
 
 
  filter(val: string): Observable<any[]> {
    // call the service which makes the http-request
    return this.dataService.getAllNameSpaces()
     .pipe(
       map(response => response.filter(option => { 
         return option.namespace.toLowerCase().indexOf(val.toLowerCase()) === 0
       }))
     )     
   }  
 
 
   getServices(namespace){   
    this.dataService.getAllServices('services').subscribe( (res) => { 
      this.dataSource = new MatTableDataSource<any>(res);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
  });
  }
}

[dukoid]

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
 
import {Component, OnInit, Injectable, ViewChild, ChangeDetectorRef } from '@angular/core';
...
 
  constructor(private dataService: RestApiService,  private changeDetectorRefs: ChangeDetectorRef) { }
 
...
 
   getServices(namespace){   
    this.dataService.getAllServices('services').subscribe( (res) => { 
      this.dataSource = new MatTableDataSource<any>(res);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
 
      this.changeDetectorRefs.detectChanges();
  });
  }

[Whisper40]

Idem avec ton ajout : https://prnt.sc/tor42o

[dukoid]

essaye ça :
(1)

Code :

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

1
2
 
  dataSource: any[] = [];

(2)
tu obtiens quoi:

Code :

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

1
2
 
{{ dataService.getAllServices('services') | async | json }}

(3)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
   getServices(namespace){   
 
console.log(namespace);     
    this.dataService.getAllServices(namespace).subscribe( (res: any) => { 
console.log(res);      
 
 
      this.dataSource = new MatTableDataSource<any>(res);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
 
      this.changeDetectorRefs.detectChanges();
  });

affiche quoi:
console.log(namespace);
console.log(res);

[Whisper40]

(1) : Génère des erreurs partout disant qu'il manque Mat... et problème de type



(2) : Je ne vois pas du tout ou le placer autre part que dans mon post du dessus.

(3) : Tout OK

Code console :

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

1
2
3
4
5
6
7
8
 
namespace-1
 
(2) [{…}, {…}]
0: {id: "0", service: "fo", tag: "latest"}
1: {id: "1", service: "mo", tag: "19"}
length: 2
__proto__: Array(0)

[dukoid]

peut tu me faire voir:

app.module.ts

[Whisper40]

App.module.ts

Code angular :

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
 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServicesNamespaceComponent } from './services-namespace/services-namespace.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
 
import {MatProgressBarModule} from '@angular/material/progress-bar';
import { ServerErrorInterceptor } from './all-error.interceptor';
 
import { AutocompleteLibModule } from 'angular-ng-autocomplete';
import { LoaderComponent } from './shared/loader/loader.component';
 
import { LoaderService } from './services/loader.service';
import { LoaderInterceptor } from './interceptors/loader.interceptor';
 
 
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatSortModule} from '@angular/material/sort';
// import { GlobalErrorHandler } from './global-error-handler';
 
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ServicesNamespaceComponent,
    LoaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatCardModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatSnackBarModule,
    ReactiveFormsModule,
    MatAutocompleteModule,
    MatInputModule,
    FormsModule,
    AutocompleteLibModule,
    MatSortModule,
    MatPaginatorModule    
  ],
  providers: [
    // { provide: ErrorHandler, useClass: GlobalErrorHandler },
    LoaderService,
    { provide: HTTP_INTERCEPTORS, useClass: ServerErrorInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

[dukoid]

je crois qu'il manque le plus important :

Code :

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

1
2
3
4
5
6
7
 
import {MatTableModule} from "@angular/material/table";
...
  imports: [
     ...
 
    MatTableModule,

[Whisper40]

C'est une blague xD Non mais là... J'avais pas vu un tuto dire de l'inclure..
Tu peut me dire ce qui t'as mis sur la piste de checker le app.module.ts ?

Merci en tout cas c'est maintenant fonctionnel avec update fonctionnel si changement de namespace !
C'est aussi fonctionnel sans le changedetector donc j'imagine que je l'enlève maintenant ?

Merci à vous deux ce fut pas simple vu que je comprenais pas la logique de la chose..

Si tu veux faire un autre test dis moi avant que je mette en résolu

[dukoid]

quand tu as écrit: "(1) : Génère des erreurs partout disant qu'il manque Mat..."
donc me suis dit qu'il manque peut etre un import

ensuite, oui tu peux enelever le changedector

et remettre :
dataSource = new MatTableDataSource<any>();


tu peux mettre RESOLU
bon courage pour la suite...

[Whisper40]

Hum ok je vais tenter de comprendre ce genre d'erreur ! Merci !

[Whisper40]

Autre info :Le

Code angular :

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

this.changeDetectorRefs.detectChanges();

est en fait nécessaire si on veut utiliser un ngIf pour voir si la table est remplie ou non. Sans utiliser ça on se retrouve avec un sort qui ne fonctionne pas.
Placer le sort et le paginate dans le Afterview n'a pas résolu le problème de mon coté.
Pas non plus besoin de code dans le ngOnInit

Code angular :

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

1
2
3
4
 
ngOnInit() {     
 
  }

Code angular :

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

1
2
3
4
5
6
7
8
9
10
 
getServices(namespace){   
    this.dataService.getAllServices(namespace).subscribe( (res) => {       
      this.dataSource = new MatTableDataSource<any>(res);      
      this.changeDetectorRefs.detectChanges();
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
 
  });
  }

Coté utilisateur et console tout semble OK comme ça.

[krakatoa]

merci pour les précisions.

sinon de façon générale on utilise le couple :

changeDetection: ChangeDetectionStrategy.OnPush,

et
this.changeDetectorRefs.detectChanges();




Quand on veut gérer sois même la mise à jour des données async dans la vue
** on met: changeDetection: ChangeDetectionStrategy.OnPush,
pour dire je desactive la detection de changement des données et je le lancerai moi meme quand je le voudrais...


** les données ont été changés donc on met:
this.changeDetectorRefs.detectChanges();

pour déclencher la détection de changement et donc pour mettre à jour la vue


** c'est une technique qui permet d'optimiser les performances d'une application
sans cette technique c'est rapide mais parfois, si on a des centaines de choses à mettre à jour dans un composant
pour des questions de performances, il est plus astucieux de gérer sois meme...