CODEWITHSUNDEEP
angulartypescript
Sagar Trivedi
Sagar Trivedi

Reputation: 47

Error : Property 'data' does not exist on type 'DashboardComponent'

I'm getting the json data into the 'data' while debugging the code while binding the ts data to html getting below error. I dont know what is missing or doing something wrong.

HTML code:

  <tr *ngFor="let details of data">
        <td>  {{details.Id}}      </td>
        <td>  {{details.Date}}       </td>
        <td>   {{details.Ip}}      </td>
        <td>  {{details.Name}}       </td>
        <td>  {{details.Version}}        </td>
        <td>   {{details.LastDate}}      </td>
        <td>    {{details.status}}      </td>
    </tr>

Dashboard.component.ts

export class DashboardComponent implements OnInit {
constructor(private _infraRequestDetailsService:InfraRequestDetailService) { }
ngOnInit(): void {   this._infraRequestDetailsService.getInfraRequestDetails(ApiPaths.GetInfraDetails+"/TestZId").subscribe(
  (data)=>
  {
    var x =data;
    console.log(x);         
  },
  (error)=>
  {
    console.log(error);
  }
)  } }

Upvotes: 0

Views: 2131

Answers (1)

Pramod Kumar
Pramod Kumar

Reputation: 1201

Data is not the variable in component. Its the name of the receiving data you mentioned while subscribing to the api. Instead declare variable and initialise the variable while subscribing to the api in ngOninit.

export class DashboardComponent implements OnInit {
dataIncoming:any[] = [];
constructor(private _infraRequestDetailsService:InfraRequestDetailService) { }
ngOnInit(): void {   this._infraRequestDetailsService.getInfraRequestDetails(ApiPaths.GetInfraDetails+"/TestZId").subscribe(
  (data)=>
  {
    this.dataIncoming =data;
    console.log(x);         
  },
  (error)=>
  {
    console.log(error);
  }
)  } }

in html

<div *ngIf="dataIncoming" > 
    <tr  *ngFor="let details of dataIncoming ">
        <td>  {{details.Id}}      </td>
        <td>  {{details.Date}}       </td>
        <td>   {{details.Ip}}      </td>
        <td>  {{details.Name}}       </td>
        <td>  {{details.Version}}        </td>
        <td>   {{details.LastDate}}      </td>
        <td>    {{details.status}}      </td>
    </tr>
</div>

Upvotes: 2

Related Questions