CODEWITHSUNDEEP
angulartypescript
prasannakumar chebrolu
prasannakumar chebrolu

Reputation: 183

ERROR TypeError: Cannot read property 'id' of null

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

enter image description here

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!

Upvotes: 1

Views: 1642

Answers (2)

Ale_Bianco
Ale_Bianco

Reputation: 655

You have just to comment this line:

this._bottomSheet.open(ProductbottomComponent);

It's not needed!

Upvotes: 1

hanan
hanan

Reputation: 1880

seems like this.data is null enter image description here

u are opening ProductbottomComponent twice once with data and once without data enter image description here

Use just

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

   // this._bottomSheet.open(ProductbottomComponent); // remove it

Upvotes: 1

Related Questions