app.component.html I'm attempting to display the response data from my Firebase project using *ngFor.
<div class="row">
<div class="col-md-3">
<h4 class="text-warning">All Employee Data</h4>
<div class="card" *ngFor="let item of employee">
<div class="card-body">
<div class="card-title">
Name: {{item.name}} // error-Property 'name' does not exist on type 'never'.
</div>
<div class="card-subtitle">
Age: {{item.age}} // error-Property 'name' does not exist on type 'never'.
</div>
<div class="card-text">
Address: {{item.address}} // same error here also
</div>
</div>
</div>
</div>
</div>
app.component.ts In this file, I am fetching data from my Firebase project.
export class AppComponent implements OnInit {
title = 'App';
constructor( private _crudService:CrudService) {}
employee:[] = [];
employeeName: string = '';
employeeAge: number | undefined;
employeeAddress: string = '';
message: string ='';
ngOnInit(){
this._crudService.getAllEmployee().subscribe((data:any) =>{
this.employee = data.map((e:any) =>{ // I am storing the response in an empty array
return{
id: e.payload.doc.id,
name: e.payload.doc.data()['name'],
age: e.payload.doc.data()['age'],
address: e.payload.doc.data()['address']
}
});
console.log(this.employee);
});
}
crud.service.ts This file contains the request being sent to retrieve Employee Data.
getAllEmployee(){
return this.fireservice.collection('Employee').snapshotChanges();
}