У меня возникают проблемы с вложенными вызовами Observable. Под этим я подразумеваю вызов службы http, которая извлекает пользователя, затем получает идентификатор от пользователя, чтобы сделать еще один http-вызов, и, наконец, отобразить результаты на экране.
1) HTTP GET 1: получить пользователя
2) HTTP GET 2: получить предпочтения пользователя, передавая уникальный идентификатор в качестве параметра
Это означает следующий код в компоненте Blah.ts
:
версия 1 - этот код ничего не отображает
ngOnInit() {
this.userService.getUser()
.flatMap(u => {
this.user = u; // save the user
return Observable.of(u); // pass on the Observable
})
.flatMap(u => this.userService.getPreferences(this.user.username)) // get the preferences for this user
.map(p => {
this.preferences = p; // save the preferences
});
}
версия 2 - этот код работает, но кажется неправильным подходом ко мне:
this.userService.getUser().subscribe(u => {
this.user = u;
this.userService.getPreferences(this.user.username).subscribe(prefs => {
this.preferences = prefs;
});
});
И это шаблон:
<h3>User</h3>
<div class="row col-md-12">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">User details</h3>
</div>
<div class="panel-body">
<table class="table table-condensed">
<thead>
<tr>
<th>Username</th>
<th>Full Name</th>
<th>Enabled</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{user?.username}}</td>
<td>{{user?.fullName}}</td>
<td>{{user?.enabled}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- end of col 1-->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">User preferences</h3>
</div>
<div class="panel-body">
<table class="table table-condensed">
<thead>
<tr>
<th>Language</th>
<th>Locale</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{preferences?.preferences?.get('language')}}</td>
<td>{{preferences?.preferences?.get('locale')}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- end of col 2-->
</div>
<!-- end of row 1-->
Я не думаю, что есть какой-то момент в показе сервиса, который просто вызывает вызовы http get()
:
http.get('http://blablah/users/')
.map((response) => response.json())
Пожалуйста, предложите, какой из них лучше всего подходит для определения цепи наблюдаемых.