Discussion :

[keokaz]

Bonsoir,

j'essaye de récupérer une liste de matière depuis un servuer REST, voici la méthode qui se charge de faire la requete GET:

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
 
    getAllMatieres():<Observable>Sommaire[]{
        let matieres:sommaire;
        this.loading = true;
 
        return  this._matieres = this.http.get('http://192.168.0.11:8000/api').subscribe((res: Response) => {
 
            console.log("reponse depuis serveur rest");
            this._matieres = res._body;
            console.log(res._body);
            this.loading = false;
 
 
          });
 
    }

j'ai la composante qui liste les matières, elle appelle cette méthode depuis un manager comme ceci:

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
 
import {Component,Input,Output,EventEmitter} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {SommaireGestionService} from './sommaire-gestion';
 
@Component({
    selector: 'table-matiere',
    templateUrl: './app/sommaire/sommaire.template.html',
 
})
 
export class SommaireComponent {
    matieres:Sommaire[];
 
    nomMatiere:string;
 
    @Output() onAdd = new EventEmitter();
    @Output() onEdit = new EventEmitter();
    @Output() onLst = new EventEmitter();
 
 
    constructor(private matiereService:SommaireGestionService){ //recupère un sigleton service
                   this.matieres = this.matiereService.getAllMatieres();
       console.log("====>",this.matieres);
    }

voici la console de firebug:




je pense que je ne dois pas faire correctement les choses à récupérer convenablement les données .
mon but est de récupérer est d'envoyer cette donnée à la vu pour lister les matières comme cecil:

Code :

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

1
2
3
4
5
6
 
 
<div class="row" *ngFor="let matiere of matieres">
    <div class="col-sm-8">
        <h4>{{matiere.id}}: {{matiere.name}}</h4>
    </div>

Auriez vous une idée de faire ça correctement ? merci de vos réponse

[dukoid]

en effet, les choses ne sont pas faites correctement.
après le GET, il faut mapper ( .map(.....)) le résultat avec un modèle.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
// Fetch all existing comments
     getComments() : Observable<Comment[]> {
 
         // ...using get request
         return this.http.get(this.commentsUrl)
                        // ...and calling .json() on the response to return data
                         .map((res:Response) => res.json())
                         //...errors if any
                         .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
 
     }

Code :

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

1
2
3
4
5
6
7
8
9
 
/* * * ./app/comments/model/comment.ts * * */
export class Comment {
    constructor(
        public id: Date, 
        public author: string, 
        public text:string
        ){}
}

[keokaz]

merci dukoid ,

je comprend maintenant pourquoi on utilise map, il va charger les données du serveur sur les attributs de la classe modèle,


voici mon modèle sommaire:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
export class Sommaire{
 
    id:number;
    name:string;
 
    static matieres:Sommaire[] = [
        { id:1, name: 'Informatique' },
        { id:2, name: 'Electronique' },
        { id:3, name: 'Infographie' },  
        ];
}

voici ce que je recois du serveur rest:

Code :

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

1
2
 
[ { id: 0, name: 'test', _id: 5872c8a07818ed18bac248f6 } ]

j'ai donc ajouter _id dans le modèle, c'est le numéro aléatoire de mongo ce qui donne:

Code :

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

1
2
3
4
5
6
7
8
 
export class Sommaire{
    constructor(public id:number,public name:string,public _id:string){
        console.log("mappage de la donner ok");
    }
 
    //static matieres:Sommaire[] =[{"id":0,"name":"test","_id":"5872c8a07818ed18bac248f6"}];
}

maintenant j'ai essayer de faire ce que tu m'as donner:

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
 
import {Injectable} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
 
@Injectable()
export class SommaireGestionService{
   // private _matieres = Sommaire.matieres.slice(0);
    private _matiereNow:Sommaire; //mémorise matière courant auquel on a sélectionner
 
    constructor(private http:Http){
        console.log('service gestion sommaire initialiser ...');
    }
    getAllMatieres():Observable<Sommaire[]>{
                 // ...using get request
         return this.http.get('http://192.168.0.11:8000/api')
                         .map((res:Response) => res.json())
                         .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
 
       // return this._matieres.slice(0);
    }

c'est cette erreur:

Code :

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

1
2
3
4
5
6
 
EXCEPTION: Error in app/app.template.html:2:8 caused by: this.http.get(...).map(...).catch is not a function core.umd.js:2837:1
 
ORIGINAL EXCEPTION: this.http.get(...).map(...).catch is not a function core.umd.js:2839:1
 
ORIGINAL STACKTRACE:

j'ai essayer de faire ceci: ( () => {} )

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
 
import {Component,Input,Output,EventEmitter} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {SommaireGestionService} from './sommaire-gestion';
 
@Component({
    selector: 'table-matiere',
    templateUrl: './app/sommaire/sommaire.template.html'
})
 
export class SommaireComponent {
    matieres:Sommaire[];
 
    nomMatiere:string;
 
    @Output() onAdd = new EventEmitter();
    @Output() onEdit = new EventEmitter();
 
    constructor(private matiereService:SommaireGestionService){ //recupère un sigleton service
    ()=>{
        this.matieres = this.matiereService.getAllMatieres(); 
    }
 
     }

je n'ai plus l'erreur mais j'ai pas mon test "mappage de la donnée ok":

Code :

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

1
2
3
4
 
    constructor(public id:number,public name:string,public _id:string){
        console.log("mappage de la donnée ok");
    }

le mappage n'a pas fonctionner ?

la console me donne ceci:

Code :

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

1
2
3
 
service gestion sommaire initialiser ... sommaire-gestion.js:17:9
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.

[keokaz]

Pour le moment je laisser tomber le map car cela perturbe tout mon code et j'aimerais avant tout comprendre comment on utilise l'observable.
Mon ancien code fonctionnais, mais le problème c'est que au premier chargement de la liste j'ai aucune matière, si j'ajoute une autre matière, la liste est chargé



J'ai modifier mon code pour uniquement récupérer les data sous forme d'observable




Voici la méthode qui charge les datas depuis mongodb ma requête REST:

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
 
    getAllMatieres():Observable<Sommaire[]>{
        this.loading = true;
      return  this.http.get('http://192.168.0.11:8000/api').subscribe(
 
            //parametre 1 = la réponse de la requete obesvable
            (res: Response) => {
                console.log(res.json());
                this._matieres = res.json();
            },
 
            //parametre 2 = en cas d'erreur
            function(error) { 
                console.log("Error happened" + error)
 
            },
 
            //parametre 3 = la réponse de la requete obesvable
            function() { 
                console.log("the subscription is completed");
                this.loading = false;
            }
 
        );
 
    }

voici le composant qui va charger les datas:

Code :

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

1
2
3
4
5
 
    constructor(private matiereService:SommaireGestionService){ //recupère un sigleton service
        console.log("attendre que l'observable retourne les matirères");
       console.log(this.matiereService.getAllMatieres());
    }

quel est le nom de l'objet que je récupère quel est la méthode qui permet de dire que la réquête à été bien chargé ?
peut t'on faire attendre le constructeur pour avoir les données je pensais quelque chose de ce genre:

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
44
45
46
47
48
 
import {Component,Input,Output,EventEmitter} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {SommaireGestionService} from './sommaire-gestion';
 
 
@Component({
    selector: 'table-matiere',
    templateUrl: './app/sommaire/sommaire.template.html',
 
})
 
export class SommaireComponent {
    matieres:Sommaire[];
 
    nomMatiere:string;
 
    @Output() onAdd = new EventEmitter();
    @Output() onEdit = new EventEmitter();
    @Output() onLst = new EventEmitter();
 
 
    constructor(private matiereService:SommaireGestionService){ //recupère un sigleton service
                let fluxObs = this.matiereService.getAllMatieres();
                let endLoad =fluxObs.laMethodeNonConnue.isTerminé;
               tantQue(endLoad == ture){
                    attendre le résultat
                 }
 
               continuer le constructor
    } 
 
    ajoutMat() {
 
        this.onAdd.emit(this.nomMatiere);
    }
 
    editMat(matiere:Sommaire) {
        this.matiereService.setMatiereNow(matiere);//sauvegarde en mémoire la matière à editer
       this.onEdit.emit(null);
    }
 
    suppr(id:number){
       this.matiereService.kilMat(id);
       this.matieres = this.matiereService.getAllMatieres();
        this.onLst.emit(null);
    }
}

[dukoid]

map ne perturbe en rien le code.

Code :

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

1
2
 
import 'rxjs/add/operator/catch';

ou tu enleves .catch(....) pour tester



l'appel du service ce fait ainsi :

Code :

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

1
2
3
4
5
6
7
 
     matieres: any;
 
    ...
  ngOnInit() {
    this.xxxxxxService.getAllMatieres().subscribe(data => this.matieres = data);
  }

[keokaz]

en fait ça perturbe car les autres méthodes s'attent à avoir un attribut static matiere,
je vais faire autrement:

j'ai créer un autre modèle que j'appelle data.ts:

Code :

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

1
2
3
4
5
6
7
8
 
export class Data {
    constructor(
        public id: number, 
        public name: string, 
        public _id:string
        ){}
}

je remet la donnée que j'ai sous mongodb:

Code :

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

1
2
3
4
5
 
  { id: 0, name: 'test2', _id: 587ae4c6fd91045ab7a73a76 },
  { id: 0, name: 'test3', _id: 587ae4dcfd91045ab7a73a77 },
  { id: 0, name: 'test1', _id: 587ae506fd91045ab7a73a78 },
  { id: 0, name: 'gfh', _id: 587af669fd91045ab7a73a79 } ]

dans mon manager , j'ai créer une autre méthode getRstMatiere() auquel je réutilise la méthode map()

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
44
45
46
47
48
49
50
51
 
 
import {Injectable} from '@angular/core';
import {Sommaire} from './sommaire-data';
import { Http, Response,Headers,RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
 
import {Data} from './data';
 
@Injectable()
 
export class SommaireGestionService{
    private _matieres = Sommaire.matieres.slice(0);
    private _matiereNow:Sommaire; //mémorise matière courant auquel on a sélectionner
    private loading:boolean;
    private _urlRest :string = 'http://192.168.0.11:8000/api';
 
    constructor(public http: Http) {
    }
 
    getAllMatieres():Sommaire[]{
        return this._matieres.slice(0);
    }
 
 
 
    getRstMatieres():Observable<Data[]>{
        this.loading = true;
      return  this.http.get('http://192.168.0.11:8000/api').map(
 
            //parametre 1 = la réponse de la requete obesvable
            (res: Response) => {
                console.log(res.json());
               // this._matieres = res.json();
            },
 
            //parametre 2 = en cas d'erreur
            function(error) { 
                console.log("Error happened" + error)
 
            },
 
            //parametre 3 = la réponse de la requete obesvable
            function() { 
                console.log("the subscription is completed");
                this.loading = false;
            }
 
        );
 
    }

à la compilation j'ai cette erreur:

Code :

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

1
2
3
 
app/sommaire/sommaire-gestion.ts(27,15): error TS2346: Supplied parameters do not match any signature of call target.
app/sommaire/sommaire-gestion.ts(36,22): error TS7006: Parameter 'error' implicitly has an 'any' type.

mon modèle est t'il correcte, quel est le souci ? il n'arrive pas hydrater les attribut de la classe Data ?

[dukoid]

dans l'observable il faut mettre any pour un retour sous forme de tableau

Code :

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

1
2
3
 getRstMatieres():Observable<any>{
        this.loading = true;

le problème c'est que tu fais tout en même temps. voici comment decomposer les choses avec la bonne pratique :


* un service httpService qui propose 4 fonctions : get, post, put, delete (se sont des get, post.... générique)
* un service MatiereService qui propose des fonctions pour récupérer des données ( par exemple getAllMatiere() ou getMatiere(id) ou setMatiere(...) ) . les fonctions vont faire appel au httpService->get ou ->post
* le composant (n'importe lequel) va faire appel à un fonction de serviceMatiere->getallMatiere()

.................... <AutoModel>........ <any>
component >> autoService >> httpService
............... <<<<<<<<<<<<<<<<<<< retour


EXEMPLE :

un component ou je veux récupérer la liste des voitures

Code :

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

1
2
3
4
5
 
  ngOnInit() {
    this.autoService.list().subscribe(data => this.autos = data);
  }
...

autoService :

Code :

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

1
2
3
4
5
 
  list(): Observable<Array<AutoModel>> {
    return this.httpService.get('/api/autos');
  }
...

httpService :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
...
  headers: Headers = new Headers();
  options: RequestOptions = new RequestOptions({ headers: this.headers });
  baseUrl: string = 'http://url-de-api';
 
  get(path: string): Observable<any> {
    return this.http.get(`${this.baseUrl}${path}`, this.options)
      .map(res => res.json());
  }
...

j'ai tiré directement de mon code qui fonctionne parfaitement !

[keokaz]

mais j'ai toujours la même erreur quand je mets any

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
 
 
    getRstMatieres():Observable<any>{
        this.loading = true;
      return  this.http.get('http://192.168.0.11:8000/api').map(
 
            //parametre 1 = la réponse de la requete obesvable
            (res: Response) => {
                console.log(res.json());
               // this._matieres = res.json();
            },
 
            //parametre 2 = en cas d'erreur
            function(error) { 
                console.log("Error happened" + error)
 
            },
 
            //parametre 3 = la réponse de la requete obesvable
            function() { 
                console.log("the subscription is completed");
                this.loading = false;
            }
 
        );
 
    }

est ce que dans après la méthode map(), on doit aussi appeler subscribe ? (dans ton exemple tu ne l'avais pas mis).

[dukoid]

j'avais pas remarqué tout de suite dans ton code mais tu dois faire les choses en 3 étapes. relis mon message précédent, je l'ai modifié !



parceque il faut respecter cet ordre :
en 1) le json interprète la chaine de donnée reçu en tableau any
en 2) le tableau est mappé sur le modèle

[keokaz]

Je vais donc faire la première étape ajouter la méthode ngOninit.

j'ai donc mon component sommaire component qui va lister les matières,
j'importe donc ngOnInit:

Code :

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

1
2
3
4
 
import {Component,Input,Output,EventEmitter,OnInit} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {SommaireGestionService} from './sommaire-gestion';

ensuite je fait implément OnInit:

Code :

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

1
2
3
4
5
6
7
8
9
 
export class SommaireComponent implements OnInit{
    matieres:Sommaire[];
 
    nomMatiere:string;
 
    @Output() onAdd = new EventEmitter();
    @Output() onEdit = new EventEmitter();
    @Output() onLst = new EventEmitter();

puis j'ai testé ceci:

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
 
import {Component,Input,Output,EventEmitter,OnInit} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {SommaireGestionService} from './sommaire-gestion';
 
 
@Component({
    selector: 'table-matiere',
    templateUrl: './app/sommaire/sommaire.template.html',
 
})
 
export class SommaireComponent implements OnInit{
    matieres:Sommaire[];
 
    nomMatiere:string;
 
    @Output() onAdd = new EventEmitter();
    @Output() onEdit = new EventEmitter();
    @Output() onLst = new EventEmitter();
 
 
    constructor(private matiereService:SommaireGestionService){ //recupère un sigleton service
 
    } 
 
    ngOnInit() {
       console.log("ng on init *********");
     let wbs =  this.matiereService.list();
     console.log(wbs);
    }

voici la méthode list() qui se trouve dans le manager SommaireGestionService:

Code :

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

1
2
3
4
5
 
    list(): Observable<Array<Sommaire>> {
        console.log("obs");
        return  this.httpService;
    }

list() me retourn indefined ? est ce normal ? httpService est une méthode qui vient d'ou ? de HTTP je dois normalement voir Objet dans la console ?

Code :

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

1
2
3
 
 
import { Http, Response,Headers,RequestOptions } from '@angular/http';

voici la sortie console:

Code :

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

1
2
3
4
5
 
ng on init ********* sommaire.component.js:21:9
obs sommaire-gestion.js:24:9
undefined sommaire.component.js:23:9
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.

Edit:

javais pas vu la suite , je m'étais arrêter à mon erreur, c'était le httpService, je vais testé ça ...

[keokaz]

Mon script récupère enfin le flux, en fait depuis le debut cela fonctionne pas car au début je me suis dit que map() était une fonctionne javascript pure,
j'avais regarder cette page:

Code :

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

1
2
 
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Map

mais en fait je crois que ce n'est pas le même map, il a fallut ajouter ceci:

Code :

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

1
2
3
 
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

du coup si je faisais ceci:

Code :

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

1
2
3
 
        return this.http.get(this._urlRest, options)
            .map(res => res.json();

je me retrouvais avec cette erreur:

Code :

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

1
2
 
EXCEPTION: Error in app/app.template.html:2:8 caused by: this.http.get(...).map is not a function

et important operator map j'ai ceci:

Code :

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

1
2
 
           console.log(this.matiereService.list().subscribe(data => this.matieres = data);

à la console j'ai enfin l'objet et l'erreur à disparu:

Code :

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

1
2
 
Object { closed: false, syncErrorValue: null, syncErrorThrown: false, syncErrorThrowable: false, isStopped: false, destination: Object, _subscriptions: Array[1] }

c'est pour cela que je tournais en rond et que cela fonctionnais jamais ....

en tout ca merci de tes bout de script, j'espère que je vais pouvoir avancer un peu dans mon tuto ...

[dukoid]

en effet, map fait partis de rxjx et il faut l'importer. je n'ai pas pensé le mentionner car cela était évident pour moi.

[keokaz]

Quand on débute c'est pas facile de trouver le pb...

Mon problème d'affichage au démarrage à été résolut, j'ai toutes mes matières, maintenant j'ai un problème avec l'enregistrement d'une nouvelle matières.
La liste n'est pas alimenter d'une nouvelle matière, je suis obliger d'utiliser la touche F5 pour la prise en compte d'un nouveau élément.

voici le composant qui permet d'ajouter une matière:

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
44
45
 
import {Component,Input,Output,EventEmitter} from '@angular/core';
import {SommaireGestionService} from './sommaire-gestion';
 
@Component({
    selector: 'ajout-matiere',
    templateUrl: './app/sommaire/sommaire-ajout.template.html',
 
})
 
export class AjoutMatiereComponent {
 
    @Output() onLst = new EventEmitter();
    @Input()  nomMatiere: string;
 
 
    constructor(private sommaireService: SommaireGestionService) {
    }
 
    saisirMat(matiere:string){
            console.log("appelle addMatiere");
 
            this.sommaireService.addMatiere({id: 0, name:this.nomMatiere}).subscribe(
 
            //parametre 2 = en cas d'erreur
            function(error) { 
                console.log("Error happened" + error)
 
            },
 
            //parametre 3 = la réponse de la requete obesvable
            function(complete) { 
                console.log(complete);
            }
 
        );;
            this.onLst.emit(null);//revenir à la liste des matières
 
    }
 
    annuler(){
        this.onLst.emit(null);
    }
 
}

dans le manager la requête POST:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
    addMatiere(newMatiere: Sommaire) {
 
        console.log("Ajouter matière",newMatiere);
 
        let headers      = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
        let options       = new RequestOptions({ headers: headers }); // Create a request option
 
        return this.http.post(this._urlRest, newMatiere,options);
 
    }

add matière est appeller sur le composante parent (ajoutMat):

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
 
import {Component,Input,Output,EventEmitter,OnInit} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {SommaireGestionService} from './sommaire-gestion';
 
 
@Component({
    selector: 'table-matiere',
    templateUrl: './app/sommaire/sommaire.template.html',
 
})
 
export class SommaireComponent implements OnInit{
    matieres:Sommaire[];
 
    nomMatiere:string;
 
    @Output() onAdd = new EventEmitter();
    @Output() onEdit = new EventEmitter();
    @Output() onLst = new EventEmitter();
 
 
    constructor(private matiereService:SommaireGestionService){ //recupère un sigleton service
 
    }
 
    ngOnInit() {
       console.log("ng on init *********");
       console.log(this.matiereService.getRstMatieres().subscribe((data)=>this.matieres = data));
    }
 
    ajoutMat():void{
        this.onAdd.emit(this.nomMatiere);
 
    }

[keokaz]

je pense qu'il faudrait que j'appelle l'événement onLst une fois que observable est terminé

Code :

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

1
2
3
4
 
export class AjoutMatiereComponent {
 
    @Output() onLst = new EventEmitter();

je remets l'obeservable

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
    this.sommaireService.addMatiere({id: 0, name:this.nomMatiere}).subscribe(
 
        function(response) { console.log("Success Response" + response)},
        function(error) { console.log("Error happened" + error)},
        function() { 
            console.log("the subscription is completed");
        });
 
    }

comment je fais pour lancer cette événement ?

Code :

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

1
2
 
      this.onLst.emit(null);

le "this" de onLst n'est pas compris car est je pense en conflit avec this.sommaireService.
si mon code est:

Code :

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

1
2
3
4
5
6
 
 
        function() { 
            console.log("the subscription is completed");
      this.onLst.emit(null);
        });

j'ai cette erreur:

Code :

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

1
2
3
 
 
EXCEPTION: this.onLst is undefined