Angular Material Bottom Sheet二次点击数据绑定失效问题

看起来你遇到的是Angular Material Bottom Sheet第二次打开时，API数据返回正常但视图不更新的问题，控制台还没有报错——这种情况通常和变更检测或者组件生命周期/订阅方式有关，下面给你几个针对性的解决方案：

方案1：手动触发变更检测 #

有时候Overlay容器（Bottom Sheet基于这个实现）里的组件，变更检测可能不会自动触发。你可以通过ChangeDetectorRef手动强制更新视图：

修改你的TS代码：

import { Component, OnInit, Inject, ChangeDetectorRef } from '@angular/core';
// 其他导入保持不变

export class ProductDetailBottomSheetComponent implements OnInit {
  product = new ProductDetailHomePage();
  productId: number;

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

  ngOnInit() {
    this.homePageService.getProductDetail(this.productId).subscribe(p => {
      this.product = p;
      this.cdr.detectChanges(); // 赋值后手动触发变更检测
    });
  }

  // 其他方法（close, addToCart）保持不变
}

方案2：使用Async管道（推荐） #

手动订阅容易出现变更检测问题，还可能导致内存泄漏。改用Angular的async管道，它会自动处理订阅、取消订阅以及变更检测：

修改TS代码： #

import { Component, OnInit, Inject } from '@angular/core';
import { Observable } from 'rxjs';
// 其他导入保持不变

export class ProductDetailBottomSheetComponent implements OnInit {
  product$: Observable<ProductDetailHomePage>; // 改成Observable类型
  productId: number;

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

  ngOnInit() {
    // 直接把Observable赋值给product$，不用手动订阅
    this.product$ = this.homePageService.getProductDetail(this.productId);
  }

  // 其他方法保持不变
}

修改HTML代码： #

用async管道订阅并获取数据，推荐用ng-container一次性订阅，避免多次订阅同一个Observable：

<button type="button" (click)="close()" mat-icon-button>
  <mat-icon class="material-icons" aria-label="hiden">arrow_drop_down</mat-icon>
</button>

<ng-container *ngIf="product$ | async as product">
  {{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> <!-- innerHTML用属性绑定，不要用插值 -->
    </mat-grid-tile>
  </mat-grid-list>
</ng-container>

方案3：检查Bottom Sheet的销毁配置 #

默认情况下，MatBottomSheet关闭后会自动销毁组件，但如果你的代码里设置了destroyOnClose: false，组件实例会被复用，导致第二次打开时ngOnInit不会再次执行。你可以检查打开Bottom Sheet的代码，确保没有这个配置：

// 打开Bottom Sheet的代码示例，确保destroyOnClose是默认的true
this.bottomSheet.open(ProductDetailBottomSheetComponent, {
  data: { productId: yourProductId },
  // 不要设置destroyOnClose: false
});

另外，HTML里的img和innerHTML绑定改成属性绑定（用方括号[]）也是Angular的最佳实践，能避免一些潜在的解析问题。

内容的提问来源于stack exchange，提问作者Du Nguyễn Phan