错误TypeError：无法读取null的属性“ id”

Question

我试图从另一个组件中显示MatBottomSheet中的值列表。我总是遇到如下错误。

错误TypeError：无法读取null的属性“ id”

我正在通过 testcomponent 传递值，如下所示：

  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);
  }

并将上述组件调用到另一个 ProductbottomComponent打字稿是

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（这是我的模板的一部分）

<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>

在控制台日志中获取值

{"id":"0504fd10-1278-41bf-b052-a459c1e37998","products":[{"productid":"","name":"Snowball","price":"5.00","quantity":1}],"order":"Order - 1005","name":"test123","email":"test@gmail.com","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"}

帮我修复它！

Answer 1

似乎是这样。data为空

u两次打开ProductbottomComponent，一次包含数据，一次不包含数据

仅使用

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

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

Answer 2

您只需对此行发表评论：

this._bottomSheet.open(ProductbottomComponent);

不需要！