угловой материал нижнего листа не привязывать данные к содержимому внутри в считанные секунды?

Question

вот мой сервер для проверки http://badpaybad.info/home-cook/

В localhost все ок.На моем сервере для тестирования у меня возникла проблема: 1-й щелчок нижнего листа рендера oki.2-й клик нижний лист не привязывает данные, API вернул данные оки.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>