Discussion :

[keokaz]

Bonsoir,

je but toujours sur cette fonction map(), j'essayer de faire sa démonstration pour la comprendre et bien l'utiliser,
que pensez vous de ce bout de script:

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
 
import { Component } from '@angular/core';
import { Http, Response,Headers,RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
 
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent{
  name = 'Angular';
 
  constructor(private _http:Http){
      this.getWbs();
  }
 
  getWbs():Observable<Matiere>{
    let wbs = this._http.get('http://192.168.0.11:8000/api').map(
      reponse => reponse.json()
    );
    console.log(wbs);
 
    let M:Matiere = new Matiere();
    return wbs;
  }
}
 
class Matiere{
  id:number;
  name:string;
  _id:string;
 
  constructor(){
    console.log("je suis la classe matiere");
    console.log("mon id est:",this.id);
    console.log("mon id est:",this.name);
    console.log("mon id est:",this._id);
  }
}

avec postman voici la réponse de la requête get:

Code :

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

1
2
 
[{"id":0,"name":"unseul","_id":"587d04affd91045ab7a73ac3"}]

voici ce que j'ai en console:

Code :

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

1
2
3
4
5
6
7
 
Object { _isScalar: false, source: Object, operator: Object } app.component.js:22:9
je suis la classe matiere app.component.js:38:9
mon id est: undefined app.component.js:39:9
mon id est: undefined app.component.js:40:9
mon id est: undefined app.component.js:41:9
Angular is running in the development mode. Call enableProdMode() to enable the production mode.

mes attributs ne sont pas chargé ? (undefined)
comment je dois m'y prendre à moin que je n'ai toujours pas compris la fonction map() ?

merci de vos réponses

[keokaz]

Après quelques visionnage de vidéo, j'ai enfin compris comment utiliser le map():

voici le script qui fonctionne

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
 
import { Component } from '@angular/core';
import { Http, Response,Headers,RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
 
@Component({
  selector: 'my-app',
  template: `<div class="row" *ngFor="let matiere of matieres">
    <div class="col-sm-8">
        <h4>{{matiere.id}}: {{matiere.name}}</h4>
    </div>
</div>`,
})
export class AppComponent{ 
  name = 'Angular';
 
  private matieres:Matiere[];
 
  constructor(private _http:Http){
      let r =this.getWbs().subscribe(data =>{
        this.matieres = data}
        );
      console.log(this.matieres); //! impossible de le savoir undefined
 
 
  }
 
  getWbs():Observable<Matiere[]>{
    let wbs = this._http.get('http://192.168.0.11:8000/api').map(
      res => res.json(),
    );
    console.log(wbs);
    return wbs;
  }
}
 
class Matiere {
    id: number;
    name: string;
    _id:number;
 
}

en essayant de faire un

Code :

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

1
2
 
      console.log(this.matieres); //! impossible de le savoir undefined

il met met undefined, mais this.matieres à bien été mapé .
Pas évident de comprendre son mécanisme , j'ai essayé de l'expliquer ici

http://profoad.education/moodle3/mod...iew.php?id=735