Angular mat-expansion-panel输入绑定延迟更新问题求助

让我们一步步拆解你遇到的问题：

1. 首先修复明显的参数传递漏洞 #

你的父组件模板里，(opened)="getItemDetails()"没有把当前循环的item传递给方法，但控制器里的getItemDetails(item)是需要接收item参数的！这会导致调用mySecondService.getMergedData(item)时，item是undefined，要么获取不到正确数据，要么请求直接失败。

先修正模板：

<mat-expansion-panel (opened)="getItemDetails(item)">

2. 核心问题：共用单一变量导致的子组件数据混乱 #

你现在用全局的dataToDisplay变量存储所有展开项的详情，这会引发两个关键问题：

• 切换展开不同面板时，新数据会覆盖全局变量，所有已展开的子组件都会同步显示最新数据，无法保留各自的内容
• Angular的变更检测无法精准识别每个子组件对应的数据源变化，只能通过setTimeout强制触发检测（本质是把赋值放到下一个宏任务队列，让Angular被动感知变化）

解决方案：给每个Item绑定独立的详情数据 #

我们可以给items数组里的每个对象添加details属性，让每个面板的子组件只绑定自己项的详情，彻底避免数据干扰。

修改父组件控制器：

@Component({
  selector: 'parent-component',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
  items: any = [];
  constructor(private myService: MyService, private mySecondService: MySecondService){}
  
  ngOnInit(): void {
    this.myService.getItems().pipe(take(1)).subscribe((response) => {
      // 初始化每个item的details为null，避免重复请求
      this.items = response.map(item => ({...item, details: null}));
    });
  }
  
  getItemDetails(item): void {
    // 如果已经加载过详情，直接返回，避免重复请求
    if (item.details) return;
    
    this.mySecondService.getMergedData(item).pipe(take(1)).subscribe((response) => {
      // 直接给当前item赋值详情，而非全局变量
      item.details = { 
        emailId: response.emailId, 
        phoneNumber: response.phoneNumber 
      };
    });
  }
}

修改父组件模板：

<mat-accordion *ngFor="let item of items">
  <mat-expansion-panel (opened)="getItemDetails(item)">
    <mat-expansion-panel-header>
      {{item.name}}
    </mat-expansion-panel-header>
    <ng-template matExpansionPanelContent>
      <!-- 绑定当前item的专属详情，不再依赖全局变量 -->
      <child-component *ngIf="item.details" [dataToDisplay]="item.details"></child-component>
    </ng-template>
  </mat-expansion-panel>
</mat-accordion>

3. 额外优化：规范子组件输入属性（可选但推荐） #

你的子组件里@Input dataToDisplay: any;缺少括号，且使用any类型不利于代码维护，建议修正为：

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  // 补全括号，同时定义具体类型
  @Input() dataToDisplay: { emailId: string; phoneNumber: string };
  
  ngOnInit(): void {
    // 可在这里添加初始化逻辑
  }
}

为什么之前setTimeout能生效？ #

setTimeout会把赋值操作放到Angular变更检测周期之外的宏任务中，当任务执行完成后，Angular会自动触发变更检测，这时就能感知到dataToDisplay的变化。但这只是临时的 workaround，无法解决根本的数据共享冲突问题。

内容的提问来源于stack exchange，提问作者Sujay Subrahmanya