Questo è quello che voglio fare.
@Component({ selector: "data", template: "{{ getData() }}
" }) export class DataComponent{ this.http.get(path).subscribe({ res => return res; }) }
Se getData
stato chiamato all’interno di DataComponent
, è ansible suggerire di assegnarlo a una variabile come this.data = res
e utilizzare mi piace {{data}}
. Ma avevo bisogno di usare come {{getData}}
per il mio {{getData}}
suggerire me?
Non puoi semplicemente restituire il valore direttamente perché è una chiamata asincrona. Una chiamata asincrona significa che è in esecuzione in background (in realtà pianificata per l’esecuzione successiva) mentre il codice continua a essere eseguito.
Inoltre non puoi avere un codice del genere direttamente nella class. Deve essere spostato in un metodo o nel costruttore.
Quello che puoi fare è non subscribe()
direttamente ma usare un operatore come map()
export class DataComponent{ someMethod() { return this.http.get(path).map(res => { return res.json(); }); } }
Inoltre, è ansible combinare più .map
con gli stessi Osservabili, poiché a volte ciò migliora la chiarezza del codice e mantiene le cose separate. Esempio:
validateResponse = (response) => validate(response); parseJson = (json) => JSON.parse(json); fetchUnits() { return this.http.get(requestUrl).map(this.validateResponse).map(this.parseJson); }
In questo modo verrà restituito un osservabile a cui il chiamante può iscriversi
export class DataComponent{ someMethod() { return this.http.get(path).map(res => { return res.json(); }); } otherMethod() { this.someMethod().subscribe(data => this.data = data); } }
Il chiamante può anche essere in un’altra class. Qui è solo per brevità.
data => this.data = data
e
res => return res.json()
sono funzioni di freccia. Sono simili alle normali funzioni. Queste funzioni vengono passate a subscribe(...)
o map(...)
per essere chiamate dall’osservabile quando i dati arrivano dalla risposta. Questo è il motivo per cui i dati non possono essere restituiti direttamente, perché quando un someMethod()
è completato, i dati non sono ancora stati ricevuti.
Due modi che conosco:
export class SomeComponent implements OnInit { public localVar:any; ngOnInit(){ this.http.get(Path).map(res => res.json()).subscribe(res => this.localVar = res); } }
Questo assegnerà il risultato alla variabile locale una volta che le informazioni vengono restituite come in una promise. Quindi fai {{ localVar }}
Un altro modo è ottenere un osservabile come variabile locale.
export class SomeComponent { public localVar:any; constructor() { this.localVar = this.http.get(path).map(res => res.json()); } }
In questo modo stai esponendo un osservabile a quel punto che puoi fare nel tuo html è usare AsyncPipe {{ localVar | async }}
{{ localVar | async }}
Per favore provalo e fammi sapere se funziona. Inoltre, poiché angular 2 è piuttosto nuovo, sentiti libero di commentare se qualcosa non va.
Spero che sia d’aiuto
Ho usato in questo modo tanto tempo …
@Component({ selector: "data", template: "{{ getData() }}
" }) export class DataComponent{ this.http.get(path).subscribe({ DataComponent.setSubscribeData(res); }) } static subscribeData:any; static setSubscribeData(data):any{ DataComponent.subscribeData=data; return data; }