Question

背景

在页面加载时，我正在进行http get调用以获取一些数据。

页面上有一个表单，用于向APi提交新数据。响应不包含新的更新数据，但在提交表单后数据存在于数据库中。

我需要在提交表单后进行第二次api调用来访问数据。

问题

提交表单后，如何再次进行初始API调用以检索当前数据，然后用它更新我的视图组件？

代码

在页面加载时，我在

中调用此函数

检索数据的初始调用

ngOnInit() { this.getPaymentMethods() }

功能定义

private getPaymentMethods() {
            let params: URLSearchParams = new URLSearchParams();
            params.set('api_key', this.apiKeyData);
            params.set('email', this.auth.user.email);
            return this.http.get(STATICS.API_BASE + STATICS.API_ALL_PAYMENT_METHODS,
                { search: params })
                .map((res: Response) => res.json()).subscribe((res) => {
                    localStorage.setItem('payment_profiles', JSON.stringify(res.payment_profiles));
                });
        }

处理来自初始通话的响应

解析数据对象响应

this.PaymentMethodKeys = Object.keys(this.pMethodsData);

在视图内部，我显示了这样的数据

<div *ngFor="let key of PaymentMethodKeys">
{{pMethodsData[key].card_no}}
{{pMethodsData[key].payment_profile_id}}
</div>

这是提交以向数据库添加新数据的表单

    saveCreditCard(model: Payment, isValid: boolean) {
            let params: URLSearchParams = new URLSearchParams();
            params.set('api_key', this.apiKeyData);
            params.set('email', model.email);

   params.set('u_address', model.street_address);
            params.set('u_city', model.city_address);

            return this.http.get(STATICS.API_BASE + STATICS.API_PAY_METHOD,
                { search: params })
                .map((res: Response) => res.json())
                .subscribe((res) => {
                    console.log(res);
                });
        }
    }

我认为我的部分问题是我从构造函数中的对象获取密钥。所以我认为我一直在努力使这项工作，但更新密钥的唯一方法是当组件刷新时，构造函数将再次运行。

任何帮助都将不胜感激。

Answer 1

我们讨论了主题，但这不是必要的。只需在视图中呈现可观察对象，并在每次更新数据库时简单地传递新数据就足够了。

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/take';

private paymentMethods: Observable<any>;

private getPaymentMethods() { 
    let params: URLSearchParams = new URLSearchParams(); 
    params.set('api_key', this.apiKeyData); 
    params.set('email', this.auth.user.email); 
    this.http.get(STATICS.API_BASE + STATICS.API_ALL_PAYMENT_METHODS, 
    { search: params }) 
    .map((res: Response) => res.json()) 
    .take(1) //Takes the first observable and unsubscribes
    .subscribe(res => this.paymentMethods = res.payment_profiles)
}

saveCreditCard(model: Payment, isValid: boolean) {
    let params: URLSearchParams = new URLSearchParams();
    params.set('api_key', this.apiKeyData);
    params.set('email', model.email);

    return this.http.get(STATICS.API_BASE + STATICS.API_PAY_METHOD,{ search: params }) 
    .map((res: Response) => res.json())
    .take(1)
    .subscribe((res) => {
        //Maybe make sure status is 200. 
        console.log(res); 
        this.getPaymentMethods(); 
    });
}

ngOnInit() { 
    this.getPaymentMethods()
}

请注意，由于我们在函数中订阅getPaymentMethods()的结果，因此没有必要返回任何内容，因此，我们无需将返回的Observable分配给paymentMethods ngOnInit()。每当调用getPaymentMethods()时（例如，在初始加载时和调用saveCreditCard()时）paymentMethods订阅发出的第一个响应，然后取消订阅take operator。

在您看来，您会注意到我们不再使用async pipe了。请记住，异步管道订阅和取消订阅。我们是手动完成的，所以没有必要这样做。

<div *ngFor="let item of paymentMethods">
    {{item.card_no}}
</div>

让我知道这是如何解决的。

表单提交后Angular 2更新组件使用响应中的新数据

1 个答案: