서비스에서 구성 요소로 데이터 전달 - 이오닉 2

Question

API에 데이터를 게시하고 API를 호출 한 서비스로 데이터를 반환하려고합니다. 이 서비스는 데이터를 서비스를 호출 한 구성 요소로 리턴합니다.

구성 요소에 데이터가 표시되지만 html로 표시하기 위해 데이터에 액세스하는 방법을 알 수 없습니다. 나는이 형식의 데이터를 얻고있다 :

이 내 서비스 공공 getPaymentDetails (대출, 지급) { 을 console.log는 ("지불 세부 도달")입니다;

  let queryParameters = new URLSearchParams(); 
      let headerParams = new Headers({ 'Content-Type': 'application/json' }); 
      let requestOptions: RequestOptionsArgs = { 
       method: 'POST', 
       headers: headerParams, 
       search: queryParameters 
      }; 


      const url = this.basePath + '/api/v1/collection/payment'; 


      // let headers = new Headers({ 'Content-Type': 'application/json' }); 
      this.http.post(url, {loan,payment} , requestOptions) 
       .subscribe(data => { 
        // console.log(data); 
        this.return_data.push(data.json()); 
       }, 
       data => { 
        // console.log(data); 
       }); 
       return this.return_data; 

     } 

이 서비스를 호출 내 구성 요소입니다

getPaymentDetails(): void { 
     //will need a separate api 
     console.log("hi get payment details") 

     this.payment_data = this.collectionService.getPaymentDetails(this.loan,this.amountForm.value["payment"]); 

     console.log(this.payment_data) 
     // for(var i=0;i<=payment_data.length;i++){ 

     // } 

    } 

때 payment_data [0] 내가 비동기 행동 발생

Answer 1

정의되지 않은 값을 가져 로깅 콘솔. 함수를 호출 한 다음 콘솔을 인쇄합니다. 함수 실행은 아직 완료되지 않았습니다. 데이터가 반환 될 때까지 기다려야합니다. 당신은 데이터를 표시하는 테이블을 사용할 수 있습니다

getPaymentDetails(): void { 
     //will need a separate api 
     console.log("hi get payment details") 

     this.payment_data = this.collectionService.getPaymentDetails(this.loan,this.amountForm.value["payment"]).subscribe(// do your logic here); 
    } 

구성 요소에서 서비스

let queryParameters = new URLSearchParams(); 
    let headerParams = new Headers({ 'Content-Type': 'application/json' }); 
    let requestOptions: RequestOptionsArgs = { 
     method: 'POST', 
     headers: headerParams, 
     search: queryParameters 
    }; 

    const url = this.basePath + '/api/v1/collection/payment'; 

    // let headers = new Headers({ 'Content-Type': 'application/json' }); 
    return this.http.post(url, { loan, payment }, requestOptions); 

에서

.

@Component({ 
    moduleId: module.id, 
    selector: "test-component", 
    styles: [], 
    template: `<div clss="row"> 
       <table class="table table-bordered"> 
        <tr> 
         <th>CBC_DUE</th> 
         <th>CURRENT_MONTH_INSTLAMENT</th> 
         <th>LPP</th> 
         <th>TOTAL_DUE</th> 

        </tr> 
        <tr *ngFor="let item of payment_data; let i=index"> 
         <td>{{item?.CBC_DUE}}</td> 
         <td>{{item?.CURRENT_MONTH_INSTLAMENT}}</td> 
         <td>{{item?.LPP}}</td> 
         <td>{{item?.TOTAL_DUE}}</td> 
        </tr> 
       </table> 
      </div>`, 

}) 

Answer 2

Observer 여기서 서비스 완료 이벤트를 수신 할 수 있습니다. 따라서 데이터 서비스에서 취할 수 있습니다 :

public getPaymentDetails(loan,payment) { 
    return new Observable(observer => { 
     ... 

     this.http.post(url, {loan,payment} , requestOptions).subscribe(data => { 
     ... 
     return observer.next(data); 
     }); 
    }); 
} 

:

this.collectionService.getPaymentDetails(...).subscribe(data => this.payment_data = data); 

서비스의 힘은 같다