Comment définir la valeur non contenue dans la carte avec RxJS?

Question

Je viens juste de commencer avec Angular 4, et j'ai un projet sur lequel je travaille qui consiste à afficher des données qui sont récupérées en utilisant une API REST. Les données semblent être récupérées correctement et le formulaire est correctement renseigné.

Maintenant, une des valeurs renvoyées par l'API ne contient qu'un seul caractère. J'espérais remplacer la méthode setter pour étendre ce seul caractère à une chaîne complète. Je comprends que je pourrais simplement changer l'appel pour retourner la chaîne complète, mais l'API est supportée par plusieurs frontaux et j'espérais les garder cohérents. Ce plunker devrait ce que j'espère faire (sans l'API impliqué REST): Plunker example

Lors de la connexion dans la fonction abonner de mon projet, fullstatus n'est pas inclus:

this.service.get(id).subscribe(p => { 
    this.test = p; 
    console.log(this.test); 
}); 

Lorsque vous ajoutez ici l'instruction switch , les choses fonctionnent comme prévu, mais j'espérais que cette logique soit intégrée dans la classe Test au lieu de la fonction subscribe.

this.service.get(id).subscribe(p => { 
    this.test = p; 
    switch (this.test.status) { 
     case 'A': 
     this.test.fullStatus = 'Active'; 
     break; 
     case 'I': 
     this.test.fullStatus = 'Inactive'; 
     break; 
     case 'N': 
     this.test.fullStatus = 'No Certificate'; 
     break; 
     default: 
     this.test.fullStatus = ''; 
     break; 
    } 
    console.log(this.test); 
    }); 

Y a-t-il une meilleure façon de gérer cela? Merci d'avance.

Answer 1

Ne peut pas vous faire map de vos résultats après l'appel api inclure cette propriété fullStatus?

Dans votre service,

// assuming you have to convert the response to json 
get(id) { 
return this.http.get(<url-to-get>).map((res) => { 
    let test = res.json(); 
    switch (this.test.status) { 
     case 'A': 
     test['fullStatus'] = 'Active'; 
     break; 
     case 'I': 
     test['fullStatus'] = 'Inactive'; 
     break; 
     case 'N': 
     test['fullStatus'] = 'No Certificate'; 
     break; 
     default: 
     test['fullStatus'] = ''; 
     break; 
    } 

    return test; // returns each response element with the new property 'fullStatus' added based on its 'status' 
}); 
} 

Ensuite, vous pouvez simplement vous inscrire dans votre classe de composant. J'espère que cela aide.

Answer 2

Vous pouvez créer une classe de test comme test-model.ts:

export class Test { 
     prop1 = ''; // dummy property (you can define these according to your need 
     prop2 = ''; 

     status: string; 
     fullStatus?: string; // optional 

     init(responseData: any){ 
     this.prop1 = responseData.prop1 ; 
     this.prop2 = responseData.prop2 ; 
     this.status = responseData.status; 
     switch (responseData.status) { 
       case 'A': 
        this.fullStatus = 'Active'; 
        break; 
       case 'I': 
        this.fullStatus = 'Inactive'; 
        break; 
       case 'N': 
       this.fullStatus = 'No Certificate'; 
        break; 
       default: 
       this.fullStatus = ''; 
       break; 
     } 
     } 
    } 

Dans le composant:

import {Test} from './test-model'; 

    export class TestComponent implements OnInit 
    { 
     test: Test = new Test(); 
     constructor(private service: MyService){} 

     ngOnInit(){ 
     this.service.get(id).subscribe(p => { 
      this.test.init(p); 

      console.log(this.test); 
     }); 
     } 
    }