角2更新组件表格后提交了新的数据从响应

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

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

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()函数中的结果，就没有必要为它返回任何东西，因此，没有必要为我们内ngOnInit()将返回的可观测到paymentMethods。每当调用getPaymentMethods()（例如，在初始加载和调用saveCreditCard()时），paymentMethods订阅第一个响应，然后取消订阅take operator。

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

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

让我知道这是如何工作的。