Discussion :

[Wells]

Bonjour, je débute (enfin j'essaye) en Angular et je suis confronté à un soucis de logique. Je ne suis pas sur que ce que je veux faire soit possible donc je vais exposter mon probleme.

J'ai une page PHP qui me renvoi un json:

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
[
  {
    "id": "1",
    "name": "Machine à laverdddddddddddd",
    "status": "éteint"
  },
  {
    "id": "2",
    "name": "Frigo",
    "status": "allumé"
  },
  {
    "id": "3",
    "name": "Ordinateur",
    "status": "éteint"
  }
]

J'ai ensuite un service qui va récupérer cette liste. Je passe par un Subject par ce que j'ai suivi un tuto mais dans l'absolu un Observable me suffit.

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
import { Subject } from 'rxjs';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
 
@Injectable()
export class CartesService {
 
	cartesSubject = new Subject<any[]>();
	private cartes = [];
	emitcartesSubject() {this.cartesSubject.next(this.cartes.slice());}
 
 
	constructor(private httpClient: HttpClient) { this.getCartes(); }
 
 
 
	getCartes()
		{
		this.httpClient
		  .get<any[]>('get-cartes.php')
		  .subscribe(
			(response) => {
			  this.cartes = response;
			  this.emitcartesSubject();
			},
			(error) => {
			  console.log('Erreur ! : ' + error);
			}
		  );
		}  
 
}

Je récupère tout ça dans mon component et ça marche bien :

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
import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { ActivatedRoute } from '@angular/router';
import { CartesService } from '../services/cartes.service';
 
@Component({
  selector: 'app-cartes',
  templateUrl: './cartes.component.html',
  styleUrls: ['./cartes.component.scss']
})
export class CartesComponent implements OnInit {
 
  cartes: any[];
  cartesSubscription: Subscription;	  
 
  constructor(private route: ActivatedRoute, private cartesService: CartesService) { }
 
  ngOnInit(): void {
 
    const id_ext = this.route.snapshot.params['id'];
 
	//const example = this.cartesService.cartes.pipe(filter(carte => carte.status == 'éteint'));
    this.cartesSubscription = this.cartesService.cartesSubject.subscribe( (cartes: any[]) => { console.log(cartes);this.cartes = cartes; } );
 
  }
 
}

Le probleme c'est que je récupère toute ma liste, moi je ne veux que les éteint. Du coup j'ai tenté d'ajouté un filter; sauf que ca marche pas

ERROR in src/app/cartes/cartes.component.ts:23:78 - error TS2339: Property 'status' does not exist on type 'any[]'.

Si je comprend bien, le carte dans le filter est un tableau de any, et du coup je n'accéde pas à ma propriété.

Du coup, est ce qu'il y a moyen de faire ce filtre comme ca ?

[krakatoa]

il faut indiquer any comme ça il sait que c'est un objet (carte: any)
sinon pour lui carte est une simple variable

Code :

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

1
2
const example = this.cartesService.cartes.pipe(filter((carte: any) => carte.status == 'éteint'));

sinon la bonne pratique est d'utiliser les models

ng g i models/i-carte

Code :

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

1
2
3
4
5
6
 
export interface ICarte {
id: string;     // ou  normalement c'est un nombre  ->  id: number;    
name; string;
status: string,
}

Code :

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

1
2
3
4
5
6
import {Icarte} from './models/....'
 
 
(carte: ICarte)
ou 
(cartes: Icarte[])