Discussion :

[Mandotnet]

Bonjour,
Voici mon exemple simplifi� :
Ci-dessous, la classe que je stocke dans firebase par des push :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
export class Message {
  author: string; content: string; 
 
concat(): string { 
  return this.author + ' :' + this.content; 
}

Ici la Data Service, qui se connecte � Firebase :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
export class MessageService { 
  lstMessages: FirebaseListObservable<Message[]>; 
  constructor(private af: AngularFire) { 
        this.lstMessages = af.database.list('/messages'); 
  } 
 
getLastest(): Observable<Message[]> { 
  return this.lstMessages; } 
 
send(msg: Message) { 
  this.lstMessages.push(msg); } }

Et finalement le app.component :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
export class AppComponent { 
   messages: Message[] = []; 
   constructor(private msgService: MessageService) { 
        this.msgService.getLastest().subscribe( 
            (data: Message[]) => { this.messages = data; console.log(this.messages[0].concat()); } 
        ); 
    }

Au final �a fonctionne dans la mesure o� je r�cup�re bien un Object[] avec mes champs, mais ce n'est pas vraiment des Message (class). Ainsi, si j'appelle depuis le r�sultat la m�thod concat (), j'obtiends une erreur :

FIREBASE WARNING: Exception was thrown by user callback. TypeError: _this.messages[0].concat is not a function
at SafeSubscriber._next

Bien s�r, �a fonctionne si je r�cr�e l'objet :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
this.msgService.getLastest().subscribe( 
    (data: Message[]) => { data.forEach( 
             (items) => this.messages.push(new Message(items.author, items.content)
             )
    );}
)

Mais �a n'a plus aucun int�r�t...

Savez-vous comment r�cup�rer ou traiter le data pour qu'il corresponde bien � ma classe .?

D'avance merci,

Mand.Net

[Mandotnet]

Pour le moment j'ai cr�� une classe avec une m�thode g�n�rique qui permet d'assigner les valeurs � mes classes models en passant leurs valeurs JSON.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
export class DataModelHelper {
   $key: string;
  static CreateFromJsonObject<T>(target: T, source: DataModelHelper): T {
    Object.assign(target , {$key: source.$key} , source);
    return target;
  }
}

Le principe c'est que les classes mod�les doivent d�river de DataModelHelper

Cela permet ensuite dans ma couche service/data de renvoyer une observable qui contient bien un Array de mes classes mod�les :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
getAllLessons(): Observable<Lesson[]> {
  return this.af.database.list('/lessons')
    .do(console.log)
    .map( item1 => item1
      .map( item2 => DataModelHelper.CreateFromJsonObject<Lesson>((new Lesson), item2)));
}

Je ne trouve toujours pas �a id�al. J'aimerais bien savoir comment les gens s'y prennent en g�n�ral.

Cdlt,

[Mandotnet]

Euh s�rieux, il n'y a pas de d�veloppeur francophone TypeScript sur Angular ou quoi ? J'ai post� il y a deux jours sur stack overflow et j'ai d�j� 8 r�ponses. Y a-t-il d'autres forums francophones ? J'ai l'impression que Developpez est mort.

[vermine]

Il n'y a effectivement pas beaucoup de membres qui participent au forum TypeScript. Il en suffit d'un ou deux pour faire vivre le flux et l'animer petit � petit jusqu'� ce que la sauce prenne. Tu es donc le bienvenu pour :

• partager la solution que tu as finalement adopt�e pour r�soudre ton probl�me ;
• r�pondre r�guli�rement (c'est en fait l� que le b�t blesse g�n�ralement) aux questions des autres ;
• proposer des actualit�s concernant TypeScript ;
• ajouter du contenu (critique de livre, article, tutoriel, QR de FAQ, etc.) � la rubrique.

Si plusieurs membres font de m�me, j'ose esp�rer que la rubrique sera un jour plus vivante.

Nous rencontrons ce genre de probl�me sur une bonne partie de nos forums r�serv�s aux frameworks JavaScript. Il y a trop d'outils et donc peu d'experts. La francophonie repr�sente un faible pourcentage des d�veloppeurs dans le monde, ce qui r�duit d'autant plus les membres actifs.

[yoyo88]

Salut, d�sol� du retard certains mais actuellement je ne bosse plus trop en typeScript.
J'ai r�solu ce probl�me avec un solution comme la tienne. a la diff�rence que je fais h�rit� mon objet d'un BaseObject qui peux prendre en entrer ou nom le Json dans le constructeur.

Bref �a reviens un peu au m�me si ce n'es que je trouve cela plus simple a �crire...

[LearningBoy]

Salut Mandotnet,

Si tu connais exactement la structure du JSON renvoy� par l'api, tu peux mapper directement un de tes objets TypeScript sur la r�ponse de l'API,
gr�ce au mot-clef "as".

Prenons un exemple avec un objet Pokemon :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
 
getPokemons(): Promise<Pokemon[]> {
  return this.http.get('app/pokemons')
             .toPromise()
             .then(response => response.json().data as Pokemon[])
             .catch(this.handleError);
}

Dans cet exemple, la r�ponse de l'API est bien transform� en un tableau d'objets m�tiers, ici un Pok�mon.

J'esp�re que cet exemple pourra t'aider.

Simon,

Auteur sur https://awesome-angular.com.

[yoyo88]

bien vu, je n'y ai pas pens�.

(bon faut dire que je bossais en Knockout, du coup les objets sont un peu diff�rent).