samedi 21 novembre 2020

NgFor only supports binding to Iterables such as Arrays. i feel my code is correct anybodies help will be appreciated

my service.ts

  userdetails(activation_code):Observable<account_details[]>
 {
   return this.http.get<account_details[]>('http://127.0.0.1:8080/api/Home/account_details? 
   activationcode='+activation_code)

 } 

my component.ts

account: account_details[];
ngOnInit(): void {
this.Backend.userdetails(this.x).subscribe(data => {
this.account = data;
console.log(this.account);
});

My account_details.ts Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

export interface account_details
{
 Account_number:number;
 Account_type: string;
 Activationcode: string;
 Balance: number;
 DOB: Date;
 Date_of_creation: Date;
 Email_address: string;
 ID: number;
 Loan: string;
 Loan_amount: number;
 Loan_status: string;
 Name: string;
 Password: string;
 Verified: string;
 }

my json object

{ID: 35, Name: "Preetham HD", Password: "Ranjitha@716", DOB: "1994-11-16T00:00:00", 
 Account_number: "673651", …}
 Account_number: "673651"
 Account_type: "SAVING"
 Activationcode: "311b086a-0667-4e59-aa46-beccc71b1e58"
 Balance: 0
 DOB: "1994-11-16T00:00:00"
 Date_of_creation: "2020-11-20T00:00:00"
 Email_address: "preetham.nov16@gmail.com"
 ID: 35
 Loan: "NO"
 Loan_amount: 0
 Loan_status: "Not_Approved"
 Name: "Preetham HD"
 Password: "Ranjitha@716"
 Verified: "YES"

my component.html Here it is my component.html i want iterate and display on the browser i am new to the angular

<div class=".container">
<div class="row">
<router-outlet></router-outlet>
<div class="col-4 border" style="padding-left: 20px;">
<form>
<table style="border: none;" class="table">
<th colspan="2">Account Details</th>
  <tr *ngFor="let acc of account">
      <td>Name</td>
      <td></td>
  </tr>
  <tr *ngFor="let acc of account">
      <td>Account Number</td>
      <td></td>
  </tr>
  <tr *ngFor="let acc of account">
      <td>Account Type</td>
      <td></td>
  </tr>
  <tr *ngFor="let acc of account">
      <td>Email</td>
      <td></td>
  </tr>
  <tr *ngFor="let acc of account">
      <td>Balance</td>
      <td></td>
  </tr>
  <tr *ngFor="let acc of account">
      <td>Loan</td>
      <td></td>
  </tr>
  <tr *ngFor="let acc of account">
      <td>Loan Amount</td>
      <td></td>
  </tr>
  <tr *ngFor="let acc of account">
      <td>Loan Status</td>
      <td></td>
  </tr>
  <tr>



Aucun commentaire:

Enregistrer un commentaire