Discussion :

[Whisper40]

Bonjour à tous,

Je n'arrive pas à mettre en place une datatable qui s'affiche après sélection d'un bouton par un utilisateur.
Le but est que l'utilisateur sélectionner un bouton, une fois la selection faite, un nouveau get part pour récupérer un JSON et afficher le contenu dans un tableau.

Actuellement ce qui fonctionne :
L'utilisateur peut selectionner, le get est envoyé, le contenu est OK je peut le récupérer et l'afficher mais la table ne se remplit pas car je ne vois pas comment initialiser la table ou la remplir une fois le get récupéré.
La datatable au niveau html est correcte. C'est vraiment au niveau de comment l'initialiser qu'il y a un problème.
J'utilise "async" et ne veut pas utiliser "subscribe".

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
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
<!-- 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>
 
 
 <!-- WORKING -->
<form class="example-form" *ngIf="services">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Namespace" aria-label="Number" matInput [formControl]="myControl2" [matAutocomplete]="auto2" > 
    <mat-autocomplete #auto2="matAutocomplete">
<mat-progress-bar mode="buffer"></mat-progress-bar>
      <mat-option *ngFor="let service of services | async" [value]="service.service">
        {{service.service}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>
 
 
 
 
 <!-- EMPTY -->
<div class="wrapper" *ngIf="services">
  <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8" >
 
    <ng-container matColumnDef="id" *ngFor="let service of services | async">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
      <td mat-cell *matCellDef="let service"> {{service.id}} </td>
    </ng-container>
 
    <ng-container matColumnDef="service" *ngFor="let service of services | async">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
      <td mat-cell *matCellDef="let service"> {{service.service}} </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>

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
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: 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() { 
 
  }
 
 
  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.services = this.dataService.getAllServices("services");  
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
 
 
 
}

Service Rest pour les call de GET

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
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { tap, startWith, debounceTime, switchMap, map } from 'rxjs/operators';
import { Observable, of, Subscription } from 'rxjs';
 
@Injectable({
  providedIn: 'root'
})
export class RestApiService {
 
  private REST_API_SERVER_BASE_LINK = "http://localhost:3000";
 
  constructor(private httpClient: HttpClient) { }
 
  data = [];
 
  public getAllNameSpaces(){
    return this.httpClient.get<any>(this.REST_API_SERVER_BASE_LINK + '/namespace').pipe(tap(data => this.data = data));
  }
 
// Le GET concerné est ici 
  public getAllServices(namespace) : Observable<any[]> {
    return this.httpClient.get<any[]>(this.REST_API_SERVER_BASE_LINK + '/' + namespace).pipe(tap(data => this.data = data));
  }
}

Merci pour l'aide
En image ce que ça donne actuellement

[dukoid]

petit test, rajoute ça à la fin du HTML

Code html :

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

1
2
3
4
     <ng-container *ngFor="let service of services | async">
        {{service|json}}
        <hr>
      </ng-container>

namespace ---> n'est jamais utilisé dans ton code ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
   getServices(namespace){   
    this.services = this.dataService.getAllServices("services");  
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

   //
    // petit test
    this.dataService.getAllServices("services").subscribe((res: any) => {
        console.log(res);
    }); 
}

que donne le console.log(res) ?

[Whisper40]

Ta boucle ng for retourne :

Code :

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

1
2
{ "id": "0", "service": "fo", "tag": "latest" }
{ "id": "1", "service": "mo", "tag": "19" }

Le namespace n'est pas utilisé actuellement pour les tests, mais tout est prévu pour l'activer en un petit changement ( rien d'anormal )

Ton petit test :
Strictement rien, rien du tout.

Info : Le problème viens simplement de comment j'ai placé mes this.datasource.. en fait étant nouveau sur angular depuis 3 jours lol je ne vois pas du tout comment les mètres, je les ai mis là car ça me semblait logique mais je pense qu'ils n'ont rien à faire là..

PS : Merci de laisser le contenu du message svp lors d'edit.. il manque la moitiée.. je la remet

[krakatoa]

Code :

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

dataSource: MatTableDataSource<any>;    // ???????????

https://blog.angular-university.io/a...al-data-table/

[Whisper40]

@krakatoa Aucune phrase ?
Le filtrage des données est côté client donc oui ce code est correct.
Regarde le lien que tu m'as envoyé.. ils en parlent..

[dukoid]

si je prend un exemple du tuto
je constate que tu ne respecte pas le code

dans ton code tu met: <th <td alors qu'il ne doit pas en avoir

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
25
<mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
 
    <ng-container matColumnDef="seqNo">
        <mat-header-cell *matHeaderCellDef>#</mat-header-cell>
        <mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</mat-cell>
    </ng-container>
 
    <ng-container matColumnDef="description">
        <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
        <mat-cell class="description-cell"
                  *matCellDef="let lesson">{{lesson.description}}</mat-cell>
 
    </ng-container>
 
    <ng-container matColumnDef="duration">
        <mat-header-cell *matHeaderCellDef>Duration</mat-header-cell>
        <mat-cell class="duration-cell"
                  *matCellDef="let lesson">{{lesson.duration}}</mat-cell>
    </ng-container>
 
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
 
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
 
</mat-table>

***
ensuite: MatTableDataSource
c'est quoi le code ?
tu l'as bien écrit ?

Code :

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

1
2
 
dataSource: MatTableDataSource<any>;