ERROR TypeError: Cannot read property 'id' of null

Question

I am trying to show the list of values in MatBottomSheet from another component. I am always getting error like below.

ERROR TypeError: Cannot read property 'id' of null

I am passing values from testcomponent like below:

 openBottomSheet(order) { const id = order; console.log('====>' + JSON.stringify(id)); console.log('====>' + JSON.stringify(order)); const MatBottomSheetRef = this._bottomSheet.open(ProductbottomComponent, { data: id, }); this._bottomSheet.open(ProductbottomComponent); }

And calling above component to another ProductbottomComponent typescript is

ngOnInit() { this.http.get('/api/getorder/' + this.authService.namespace + '/' + this.data.id) .subscribe(result => { this.model = result; console.log('-====>' + JSON.stringify(this.model)); }); }

productbottom.component.html (here is a part of my template)

<table cellpadding="10" width="100%"> <thead> <tr style="text-align:left"> <th>Item</th> <th>Qty</th> </tr> <tr *ngFor="let del of model.products"> <td>{{del.name}}</td> <td>{{del.quantity}}</td> </tr> </thead> </table>

Getting values in console log

{"id":"0504fd10-1278-41bf-b052-a459c1e37998","products":[{"productid":"","name":"Snowball","price":"5.00","quantity":1}],"order":"Order - 1005","name":"test123","email":"[email protected]","mobile":"111111111","status":"Packing In Progress","note":"","packedby":"test78","packedbyId":"1bd9632a-406a-4212-a8c0-d0732ab42635","packeddate":"","deliveredby":"","deliveredbyId":"","delivereddate":"","type":"testPickup","address1":"","address2":"","city":"","state":"","zip":"","createddate":"2020-07-06 22:07:17","lastModifieddate":"2020-07-06 22:07:17"}

Help me to fix it!

this.data seems to be null. Where is it initialized? How do you call ngOnInit()? As this is not an arrow function, did you think of binding it? — Stéphane Veyret
– Stéphane Veyret, Commented Jul 8, 2020 at 7:06

Ale_Bianco · Accepted Answer · 2020-07-08 07:56:42Z

1

You have just to comment this line:

this._bottomSheet.open(ProductbottomComponent);

It's not needed!

edited Jul 8, 2020 at 7:56

answered Jul 8, 2020 at 7:42

Ale_Bianco

6652 gold badges9 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hanan · Accepted Answer · 2020-07-08 07:08:29Z

seems like this.data is null

u are opening ProductbottomComponent twice once with data and once without data

Use just

 const MatBottomSheetRef = this._bottomSheet.open(ProductbottomComponent, { data: id, }); // this._bottomSheet.open(ProductbottomComponent); // remove it

Collectives™ on Stack Overflow

ERROR TypeError: Cannot read property 'id' of null

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related