28

ネストされた Observable 呼び出しを行う際に問題が発生しています。つまり、ユーザーを取得する http サービスへの呼び出しを意味し、ユーザーから ID を取得して別の http 呼び出しを行い、最後に結果を画面に表示します。

1) HTTP GET 1 : ユーザーを取得する

2) HTTP GET 2: パラメータとして一意の識別子を渡して、ユーザーの設定を取得します

これは、 component 内の次のコードに変換されます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())

Observable のチェーンを定義するための最適な方法を提案してください。

4

4 に答える 4

4

バージョン 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
        })
        .subscribe();
}
于 2016-11-24T14:40:51.530 に答える