error TS2339: Property 'name' does not exist on type 'never'

0
votes

app.component.html as you can see I'm trying to show response data of my firebase project by *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 as you can see I'm trying to fetch data from firesbase 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) =>{   // here I'm storing res in 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 as you can see I'm sending request to get Employee Data

getAllEmployee(){
    return this.fireservice.collection('Employee').snapshotChanges();
  }
2
angulartypescriptfirebasegoogle-cloud-firestore
why you are not using e.payload.doc.data.name instead of e.payload.doc.data()['name'] in ngOnInit – vivek
let me try.. if it's works, thank you in advance – harsh
no buddy , it doesn't work – harsh
your code is correct, may be you can check response from _crudService.getAllEmployee OR you can debug code for ` this.employee = data.map((e:any) =>{ return{ id: e.payload.doc.id, name: e.payload.doc.data()['name'], age: e.payload.doc.data()['age'], address: e.payload.doc.data()['address'] } }); ` – vivek
yes, there is no issue in response i'm getting response like this. address: "Ahmedabad" age: 21 id: "xS0Uz0eXCNyb4YciVadj" name: "harsh" – harsh

2 Answers

1
votes

Option 1: safe navigation operator

The array employee is empty when the component is rendered initially. You could use the safe navigation operator ?. to check if a property is available before trying to render it.

<div class="card-title">
  Name: {{ item?.name }}
</div>
<div class="card-subtitle">
  Age: {{ item?.age }}
</div>
<div class="card-text">
  Address: {{ item?.address }}
</div>

Option 2: async pipe

If the variable this.employee is used only to render the output in template, you could skip the subscription in the controller and use async pipe in the template.

Controller

import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

export class AppComponent implements OnInit {
  title = 'App';
  employees$: Observable<Array<any>>;        // <-- type observable here
  employeeName: string = '';
  employeeAge: number | undefined;
  employeeAddress: string = '';
  message: string = '';

  constructor(private _crudService: CrudService) {}

  ngOnInit() {
    this.employees$ = this._crudService.getAllEmployee().pipe(
      map((e: any) => ({
        id: e.payload.doc.id,
        name: e.payload.doc.data()['name'],
        age: e.payload.doc.data()['age'],
        address: e.payload.doc.data()['address']
      })),
      tap(console.log) // <-- check the value
    );
  }
}

Template

<ng-container *ngIf="(employees$ | async) as employees">
  <div class="row">
    <div class="col-md-3">
      <h4 class="text-warning">All Employee Data</h4>
      <div class="card" *ngFor="let item of employees">
        <div class="card-body">
          <div class="card-title">
            Name: {{ item['name'] }}     <!-- bracket notation instead of dot notation -->
          </div>
          <div class="card-subtitle">
            Age: {{ item['age'] }}
          </div>
          <div class="card-text">
            Address: {{ item['address'] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-container>
0
votes

You can use JSON.parse(JSON.stringify(data)) before this.employee = data.map((e:any) =>{ // here I'm storing res in empty array