Angular 11 get any param from object is undefined

Whatever I do, no matter how I change the code, I cannot get hostelid. The problem with method deleteHostel. Model:

export class Hostel {
    hostelid: string;
    name: string;
    location: string;
    phone?: string;    
    employees?: Array<Employee>;
}

Service:

export class HostelService {
     getHostels(): Observable<Hostel[]>
    {
      return this.http.get<Hostel[]>(`${this.apiUrl}api/Hostels/`);
    }   
    deleteHostel(id: string): Observable<any>
    {
      return this.http.delete(`${this.apiUrl}api/Hostels/${id}`);
    }
}

Component:

ngOnInit(): void {
    this.id = this.route.snapshot.paramMap['id'];
    this.isAddMode = !this.id;
    this.loadHostels();
    if (!this.isAddMode) {
      this.hostelService.getHostelById(this.id)
          .pipe(first())
          .subscribe( hostel => {this.hostel = hostel});
    }
    else {
      this.hostel = new Hostel();
      let newid = Guid.New() as string;
      this.hostel.hostelid = newid;
    }
  }
loadHostels(): void
  {
    this.hostelService.getHostels().subscribe((data:Hostel[])=> {this.hostels = data});    
  }
deleteHostel(id: number):void{    
    let hostel = this.hostels[id];
    let hostelid = hostel.hostelid;
    let res = this.hostelService.deleteHostel(hostelid).subscribe( response => {
      this.hostels.forEach((item, index) => {
      if(item.hostelid === hostelid){ 
        this.hostels.splice(index,1);
      }
    }); },
    err => {
      this.notifSrv.openSnackBar('error');
    });
    
  }

html:

<mat-list *ngIf="hostels">
            <ng-container *ngFor="let item of hostels; last as last; let index = index;">
                <h3 matSubheader>{{item.name}} 
                    <button mat-icon-button color="warn" aria-label="delete" (click)="deleteHostel(index)">
                        <mat-icon>delete</mat-icon>
                    </button>
                    <button mat-icon-button color="accent" aria-label="edit" (click)="updateHostel(index)">
                        <mat-icon>edit</mat-icon>
                    </button>
                </h3>
                <mat-list-item>                    
                <div> <span><span *ngIf="item.phone">{{item.phone}}</span>
                    &nbsp;{{item.location}}</span>   
                </div>                 
                </mat-list-item>
                <mat-divider *ngIf="!last"></mat-divider>
            </ng-container>               
        </mat-list>

Index return normal data – 0,1,2.

But hostelid always is undefined.

If I change deleteHostel parameter to object param (string), in html

(click)="deleteHostel(item.hostelid)

and in component

deleteHostel(id: string)

id is undefined. If I change deleteHostel parameter to object , in html

(click)="deleteHostel(item)

and in component

deleteHostel(item: Hostel)

item is undefined.

I googled a lot and tried a lot of options but nothing worked.

Update: console log

If I change deleteHostel parameter to object , in html

(click)="deleteHostel(item)

and in component

deleteHostel(hostel: Hostel)
{
 console.log(hostel); <--{hostelId: "4f8be387-bbb0-4bfa-8217-09edca45f7ee", name: "test2", location: "test2", phone: null, employees: null}
 console.log(hostel.hostelid); <-- undefined
}

I have vague doubts about hostelId in object, and hostelid in class, how can this be? because the type is the same.

Answer

JavaScript property names are case sensitive. Seems like the ID in your model Hostel was defined with the incorrect casing. It should be:

export interface Hostel {
  hostelId: string;
  // your other properties
}

Don’t forget to rename the property in your delete function as well:

deleteHostel(hostel: Hostel) {
 console.log(hostel.hostelId);
}

Leave a Reply

Your email address will not be published. Required fields are marked *