角度材料底部页面在几秒钟点击时不会将数据绑定到内部内容？

Question

这是我要测试的服务器

在localhost中一切正常。在我的服务器上测试我遇到了问题： 第一次点击bottomsheet渲染oki。 第二次单击底部不绑定数据，API返回数据oki。 chrome没有错误日志。

这是ts文件中的代码

          product = new ProductDetailHomePage();

      constructor(@Inject(MAT_BOTTOM_SHEET_DATA) public data: any,
        private homePageService: HomePageService,
        private bottomSheetRef: MatBottomSheetRef<ProductDetailBottomSheetComponent>) {
        this.productId = data.productId;
      }

      ngOnInit() {
        this.homePageService.getProductDetail(this.productId).subscribe(p => {
          this.product = p;
        });
      }

这里是html文件中的代码

        <button type="button" (click)="close()" mat-icon-button>
      <mat-icon class="material-icons" aria-label="hiden">arrow_drop_down</mat-icon>
    </button>
     {{product.Title}} <b>Code: {{product.ProductCode}}</b>
    <mat-divider></mat-divider>
    <div class="product-detail-attribute">      <b>Gram: {{product.Gram}} </b> <i> Calorie: {{product.Calorie}} </i> Price: {{product.Price}}</div>
    <mat-grid-list cols="4" class="product-detail">  
      <mat-grid-tile class="product-detail-image" colspan="2" >
          <img src="{{product.ImageUrl}}" />
      </mat-grid-tile>
      <mat-grid-tile class="product-detail-description" colspan="2">
          <button type="button" mat-icon-button (click)="addToCart()">
              <mat-icon class="material-icons" aria-label="add to shopping cart">add_shopping_cart</mat-icon>Add to cart
            </button>
      </mat-grid-tile>
      <mat-grid-tile class="product-detail-description" colspan="4">
        <div  innerHTML="{{product.Description}}"></div>
      </mat-grid-tile>
    </mat-grid-list>