Angular - Data is not binding in HTML Page

Question

I am very beginner in Angular. When I try to display the data in HTML, the data is not binding. I can display the data in the console also I can display the number of counts as well.

Service:

export class PaymentDetailService 
{

  constructor(private http:HttpClient) { }
  formData:PaymentDetail=new PaymentDetail();
  readonly baseURL='https://localhost:5001/api/PaymentDetail';
  public list:PaymentDetail[];
  postPaymentDetail()
  {
   return this.http.post(this.baseURL,this.formData);
  }
  refreshlist()
  {
   this.http.get(this.baseURL)
   .toPromise()
   .then(res=>
            {
            this.list=res as PaymentDetail[]
            }
        ) ;
  }
}

Component:

export class PaymentDetailsComponent implements OnInit {

  constructor(public service:PaymentDetailService) { }

  ngOnInit(): void {
   this.service.refreshlist();
  }

 
}

HTML Page:

<table class="table">
    <thead class="thead-light">
        <tr>
            <td>Card Owner</td>
            <td>Card Number</td>
            <td>EXpiry Date</td>
            <td></td>
        </tr>
    </thead>
    <tbody>
<tr *ngFor="let pd of service.list">   
    <td>{{service.list.length}}{{pd.CardOwner}}</td>
    <td>{{pd.CardNumber}}</td>
    <td>{{pd.ExporationDate}}</td>
    <td>
     <i class="far fa-thrash-alt fa-lg text-danger"></i>
    </td>
</tr>
    </tbody>
</table>

Can anyone help me to solve this issue? Thank you.

Answer 1

here is the example I created, in this example I get the user list from userService and store it into one variable, and then use this variable to display the user list in the template. live demo example

I hope this is helpful for you.