Observable et filter

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:

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:

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:

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 :)

Citation:

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 ?