Discussion :

[olivier252]

Hello,
Me revoilà

Je cherche à passer un simple objet dans un datasource d'une table material comme ceci par exemple :

Code :

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

1
2
3
4
5
6
7
 
{
      "codeModele": "3223er",
      "codeLibelle": "opl84",
      "stock": 12,
      "prixTTC": 29,
    }

J'ai l'impression que le datasource n'accepte que des tableaux d'objets dans la doc (mais je lis mal la doc des fois...)

J'aimerais pouvoir avec un ngFor "eplucher" les membres de l'objet dans 2 colonnes l'une pour les propriétés et une pour les valeurs
Merci à toi

[krakatoa]

tu as bien suivis cet exemple ?


https://material.angular.io/components/table/overview

[olivier252]

En fait, cet exemple montre le système avec un tableau d'objet et ça j'arrive à le manipuler en attribuant une colonne pour chaque propriété. Dans mon cas, je n'ai qu'un objet avec plusieurs paires propriété: valeur et je voudrais une colonne
qui affiche les propriétés et une autre les valeurs un peu comme un for...in dans la doc MDN

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
const object = { a: 1, b: 2, c: 3 };
 
for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}
 
// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

Sauf qu'il faudrait que j'arrive à faire ça dans mon template en fait..

[krakatoa]

donc il faut convertir tes données de départ

Code :

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

1
2
 
const object = { a: 1, b: 2, c: 3 };

en un tableau d'objet comme ça :

Code :

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

1
2
3
4
5
6
 
[
  {key: a, value: 1},
  {key: b, value: 2},
  {key: c, value: 3},
]

ainsi tu pourras le transmettre au data table sous cette forme !

je te laisse essayer de faire ça, si tu n'arrive pas je peux t'aider

[olivier252]

yep, effectivement, je me demandais si il falait que j'en passe par là, je pense que j'ai réglé le problème grace à un ceci

Code :

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

1
2
 
this.productSelected = Object.entries(value).map((e) => ( { [e[0]]: e[1] } ));

Mais le mal est plus profond : je galère sur un autre point j'ai une erreur 404 lorsque je veux récupérer un objet ça doit l'observable qui n'est pas bonne
Dans mon appli je souhaite en fait afficher un objet "product" dans un composant nommé "product" par une propriété codemodele qui fait office d'id, jusque là rien de fou.
Pour cela je dois rentrer mon fameux code modele (un code à 3 chiffres) dans un input, et à la vaildation je devrais aficher le produit dans le data table. mais rien ne se passe...

Côté back-end j'ai un fake en json-server

service :

Code :

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

1
2
3
4
5
6
 
baseURL: string = "http://localhost:3000/";
..................................
getProductByCodeModel(codeModele: number): Observable<Product> {
    return this.http.get<Product>(`${this.baseURL}zone/${codeModele}`);
  }

ts

Code :

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

1
2
3
4
5
6
7
8
 
  onCheckRef() {
    let codemodele = this.refFormGroup.get('reference').value; // référence code modele d'un article
    this.sub = this.rayonService.getProductByCodeModel(codemodele).subscribe(value => {
      console.log(value);
this.router.navigate([`/zone/${codemodele}`]);
    });
  }

le html

Code :

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

1
2
3
4
 
<button (click)="onCheckRef()" matStepperNext>
      <mat-icon>done</mat-icon>
</button>

le backend :

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
 
{
  "product": [
    {
      "codeModele": 111,
      "codeLibelle": "879rty",
      "stock": 77,
      "prixTTC": 85,
      "couleur": "bleu",
      "matiere": "laine",
      "zone": "f15"
    },
    {
      "codeModele": 222,
      "codeLibelle": "opl84",
      "stock": 12,
      "prixTTC": 29,
      "couleur": "rouge",
      "matiere": "coton",
      "zone": "k14"
    }
  ]
}

le model

Code :

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

1
2
3
4
5
6
7
8
9
10
 
export class Product {
    codeModele: number;
    codeLibelle: string;
    stock: number;
    prixTTC : number;
    couleuyr: string;
    matiere: string;
    zone: string;
}

le routing

Code :

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

1
2
 
  { path: 'zone/:id', component: ProductComponent },

mon erreur

Jene comprends pas pourquoi j'ai un localhost 3000 et non 4200 d'ailleurs (c'est ce qui provoque l'erreur peut-être)

vloia...merci si tu vois l'erreur...

[krakatoa]

teste l'url avec postman