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

Question

背景

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

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

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

问题

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

代码

在页面加载时我在里面调用这个函数

检索数据的初始调用

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);

在 View 中我这样显示数据

<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

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

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>

让我知道这是怎么回事。