Bien le bonjour, bonne reprise pour ceux qui viennent de reprendre le boulot et bon courage à vous !

Alors, j'ai un petit soucis sur mon projet, qui est un projet Web fait en Angular version 6. Je possède des données dans ma base de données faites FireBase que je récupère facilement dans mon fichier TypeScript, suite à la récupération des données j'aimerai les stockés dans un tableau de ma classe appelé "Marker".

Dans un premier temps voici le code de ma classe Marker :

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
export class Marker {
    photo: string;
 
    title: string;
    descri: string;
    type: string;
    lat: number;
    lng: number;
 
    constructor(public titleSpot: string,
                public description: string,
                public typeSpot: string,
                public latitude: number,
                public longitude: number,
            ) {
        this.title = titleSpot;
        this.descri = description; 
        this.type = typeSpot;        
        this.lat = latitude;  
        this.lng = longitude; 
    }
}
Donc effectivement je récupère toutes les données qui vont bien dans ma base de données pour pouvoir créer des objets Marker et les mettres dans un tableaux. Pour cela dans mon TypeScript j'ai écrit cela :

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
 
 markers: Marker[];
 
  constructor(private route: ActivatedRoute, private spotService: SpotService, private router: Router) {
      this.getAndCreateAllLocation();
  }
 
  getAndCreateAllLocation() {
 
        var ref = firebase.database().ref('/spots/');
        var query = ref.orderByKey();
        query.once("value")
        .then(function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
        var key = childSnapshot.key;
        var childData = childSnapshot.val();
 
     console.log(childData.titleSpot);
     console.log(childData.description);
     console.log(childData.typeSpot);
     console.log(childData.latitude);
     console.log(childData.longitude);
     this.markers.push(new Marker(childData.titleSpot, childData.description, childData.typeSpot, childData.latitude, childData.longitude));
      });
    });
 
    for(let myMarker of this.markers) {
        console.log(myMarker);
    }
  }
Ce code me génére une erreur dans la console :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
TypeError: Cannot read property 'markers' of undefined
TypeError: Cannot read property 'markers' of undefined
Je ne sais pas si je m'y prend correctement, suite à cela je souhaiterai récupérer la latitude et longitude de mon Marker pour pouvoir l'utilisé dans mon code HTML. Je sais pas si je m'y prend de la bonne façon non plus.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
<agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude" [longitude]="marker.longitude"></agm-marker>
Je me doute que ça doit être une erreur de débutant.
Je vous remercie d'avance et j'espère avoir été assez précis et clair pour en venir à bout !