javascript - RxJs: http.get λαμβάνει έναν πίνακα, αλλά θέλω ο συνδρομητής να λάβει μεμονωμένα στοιχεία
Γράφω μια εφαρμογή Angular2 (RC5) που χρησιμοποιεί ένα RESTful API backend του NodeJS.
Μία από τις διαδρομές του backend επιστρέφει έναν πίνακα με 'Υποψηφίους':
exports.list = function (req, res, next) {
const sort = req.query.sort || null
const fields = req.query.fields || null
let query = Candidate.find()
if (sort !== null) {
query.sort(sort.replace(',', ' '))
}
if (fields !== null) {
query.select(Candidate.reduceFields(fields))
}
query
.then(function (candidates) {
res.send(candidates)
})
.catch(next)
}
Λαμβάνω αυτό στο frontend σε μια υπηρεσία:
getCandidates() {
return this.http
.get(`http://localhost:3500/api/v1/proboard/candidates`)
.map(function (res) {
console.log("First:" + res.json());
return res.json();
})
};
Στη συνέχεια, ο ελεγκτής μου εγγράφεται σε αυτό το παρατηρήσιμο:
ngOnInit() {
this.subscription = this.candidateService.getCandidates()
.subscribe(
(candidates: Candidate[]) => {
console.debug("Got:" + JSON.stringify(candidates));
this.candidates = candidates;
}
);
}
Αυτό λειτουργεί, αλλά όχι με τον τρόπο που περίμενα (ή ήθελα;). Ο ελεγκτής λαμβάνει έναν πίνακα αντικειμένων από το ρεύμα, όχι μεμονωμένα στοιχεία του πίνακα.
Για παράδειγμα, αν υπήρχαν 20 υποψήφιοι που επιστράφηκαν από το backend, ο ελεγκτής θα καταγράψει ότι ο κώδικας συνδρομής κλήθηκε μία φορά, και θα λάβει έναν πίνακα με 20 στοιχεία.
Αυτό που ήθελα ήταν ο κωδικός συνδρομής του ελεγκτή να κληθεί 20 φορές, κάθε φορά με ένα μόνο στοιχείο, όχι με έναν πίνακα με 1 στοιχείο.
Μου λείπει κάτι όσον αφορά την κατανόησή μου για το πώς λειτουργεί το RxJs. Πώς θα πρέπει να αναδιατάξω αυτόν τον κώδικα ώστε ο ελεγκτής να λαμβάνει ένα στοιχείο κάθε φορά αντί ολόκληρο τον πίνακα ταυτόχρονα;
Το κίνητρό μου για να θέλω αυτό είναι επειδή θέλω, τελικά, να μην λαμβάνω μόνο τη λίστα των υποψηφίων όπως είναι τώρα, αλλά και οποιεσδήποτε αλλαγές στη λίστα ενώ ο ελεγκτής είναι ενεργός.
Απάντηση #1
Αντιμετώπισα μια πολύ παρόμοια απαίτηση στην εφαρμογή μου.
Αλλαγή :
this.subscription = this.candidateService.getCandidates()
.subscribe(...);
Σε
this.subscription = this.candidateService.getCandidates()
.switchMap(candidates => Observable.from(candidates))
.subscribe(...);
Απάντηση #2
Το back-end σας στέλνει έναν πίνακα δεδομένων και επομένως το front-end observable σας εκπέμπει τον ίδιο πίνακα.
Αν θέλετε το παρατηρήσιμο του front-end σας να εκδίδει μεμονωμένα στοιχεία του πίνακα, πρέπει να το δημιουργήσετε χρησιμοποιώντας κατάλληλους τελεστές αντί απλώς να χρησιμοποιείτε τον τελεστή map. Δείτε τον τελεστή from.
